div背景半透明（网页中如何设置表格的背景图片是半透明，表格里的文字则不透明）

本文目录

• 网页中如何设置表格的背景图片是半透明，表格里的文字则不透明
• CSS如何使背景透明以及文字不透明的实例
• html背景透明怎么设置

网页中如何设置表格的背景图片是半透明，表格里的文字则不透明

分类: 电脑/网络
问题描述:

网页中如何设置表格的背景图片是半透明，表格里的文字则不透明？

解析:

要做透明效果的图片，除了CSS的方法之外。

就是你说得用PS之类的图片处理软件来做了。

但是如果用PS来做，记得保存的格式必须是.gif，因为只有.gif才本身就具备透明效果。.JPG是没有透明效果的。
另外，针对你的效果，CSS其实就很好实现了。

只是要注意方法，不同的方法有不同的效果。

下面我说的方法不会出现你所说的那样——

“css设置层半透明效果搞得上面的字也模糊，再加一个文字层那也太占用空间了，打开慢”

看我做的网页代码：

《》

《head》

《meta -equiv="Content-Type" content="text/; charset=gb2312"》

《title》半透明效果图片，背景可见，图片上文字也可见《/title》

《style type=text/css》

《!--

body {

background-image: url(images/xiahuaxian.gif);

}

#tupian {

filter: Alpha(Opacity=50, Style=3 );

}

--》

《/style》

《/head》

《body》

《img src=images/0001 name=tupian width=580 height=396 id="tupian"》

《div id="Layer1" class="page_speeder_488926407"》图片上的文字图片上的文字图

片上的文字图片上的文字图片上的文字图片上的文字《/div》

《/body》

《/》

注意图片要有“id="tupian"”的设置，背景图片的设置在body {

background-image: url(images/xiahuaxian.gif);}

这个就是设置那张图片的半透明效果，这样设置的话，不会影响到别的图片的效果。

#tupian {

filter: Alpha(Opacity=50, Style=3 );

}

如果要半透明效果的图片呈现别的形状，改动“Style=3”的值即可，取值范围为0，1，2，3；其中0是最普遍的，即统一格式。

附带说一句，文字层其实不占空间，你看我的文字层才这么一段——

《div id="Layer1" class="page_speeder_488926407"》图片上的文字图片上的文字图

片上的文字图片上的文字图片上的文字图片上的文字《/div》

做网页时，倒是表格得注意，网页中的表格要整个下载完（即《table》和《/table》之间）才能显示，所以网页中要少用表格。否则显得打开很慢。

CSS如何使背景透明以及文字不透明的实例

在我们设计制作一些网页的时候可能会用到半透明的效果，首先我们可能会想到用PNG图片处理，当然这是一个不错的办法，唯一的兼容性问题就是ie6 下的BUG，但这也不困难，加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层，如登陆框、注册框、提示等，这时可能需要整个页面都要被半透 明的遮罩层覆盖，那么如用背景平铺的话，此时此刻也许就不是一个好办法了，图片大了会影响加载速度，图片小了同样会增加页面的渲染计算量，那么这时也许就 需要用CSS滤镜了。
假如有这样一个例子：“有一个DIV块，此DIV是黑色半透明的，但此DIV里面的内容要保持原状，不能透明”，那么我们该怎么做呢？
假如HTML部分我们这样写的
《div class="touMingDiv"》
《div》
《h1》这是透明的层这是透明的层这是透明的层这是透明的层
这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层
《/h1》
《/div》
《p》
这是透明的层,但上边的文字和图片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome
《/p》
《img src="bg.jpg"/》
《/div》对于CSS我们也许就这样写了
.touMingDiv{
filter:Alpha(opacity=60);
opacity:0.6;
}但经过测试我们发现，不仅div容器半透明了，连div里面的文字和图片都把透明了。由于这些滤镜的属性已经继承给了子元素，所以会出现这种效果。
我们可以用下面这种发法来实现
.touMingDiv{
width:800px;
min-height:300px;
color:#fff;
background:rgba(0,0,0,0.6);
background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/
filter:Alpha(opacity=60);/*只对ie7,ie8有效*/
}
.touMingDiv p,
.touMingDiv div,
.touMingDiv img{
position:relative;
/*或者是absolute，都可以使文字不透明，这样做还是为了
兼容ie9,ie8,ie7下背景透明而而背景上的文字不透明的效果*/
}注意，上面background:rgba(0,0,0,0.6);只对ie9，ie10，FF，Chrome...等有效，不包括ie6，ie7，ie8，所以有了这几句代码:
background:#000 9;/*CSS Hack,只能对ie9以下浏览器ie6,ie7,ie8有效，否侧ie10,FF,Cherome会失去透明效果*/
filter:Alpha(opacity=60);/*只对ie7,ie8有效*/另外还要对子级元素设置relative或者absolute属性，这样才能出现背景透明而背景上面的文字和图片正常显示的效果。
但这里的代码毅然不适合ie6，建议对于ie6就用png图片吧，然后用js做一下处理。

html背景透明怎么设置

html-css 中让一个DIV的背景色是半透明的，但它的内容（文字图片之类的）不是透明的，这个的话，是可以通过设置2个div来实现的，第一个包裹着第二个div然后在设置相同的div宽高，在将第一个的opacity为0.6；代码如下：
《html》
《head》
《style》
div{
widht:220px;
height:300px;
}
#div1{
background:#fff;
opacity:0.6;
z-index:10;
}
#div2{
z-index:11;
}
《/style》
《/head》
《body》
《div id=’div1’》
《div id=’div2’》
《p》我是测试文字《/p》
《/div》
《/div》
《/body》
《/html》