利用DIV+CSS实现元素透明的两种方法
编辑：阅读：(0)字号：
关键字词：
 |  |  |  | Design by  |  | 博客分类：
在我们设计制作一些网页的时候可能会用到半透明的效果，首先我们可能会想到用PNG图片处理，当然这是一个不错的办法，唯一的兼容性问题就是ie6 下的BUG，但这也不困难，加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层，如登陆框、注册框、提示等，这时可能需要整个页面都要被半透 明的遮罩层覆盖，那么如用背景平铺的话，此时此刻也许就不是一个好办法了，图片大了会影响加载速度，图片小了同样会增加页面的渲染计算量，那么这时也许就 需要用CSS滤镜了。
假如有这样一个例子：“有一个DIV块，此DIV是黑色半透明的，但此DIV里面的内容要保持原状，不能透明”，那么我们该怎么做呢？
假如HTML部分我们这样写的
&div class="touMingDiv"&
&h1&这是透明的层这是透明的层这是透明的层这是透明的层
这是透明的层这是透明的层这是透明的层这是透明的层这是透明的层
这是透明的层,但上边的文字和图片均不透明，兼容ie7,ie8,ie9,ie10,FF,Chrome
&img src="bg.jpg"/&
对于CSS我们也许就这样写了
.touMingDiv{
filter:Alpha(opacity=60);
opacity:0.6;
但经过测试我们发现，不仅div容器半透明了，连div里面的文字和图片都把透明了。由于这些滤镜的属性已经继承给了子元素，所以会出现这种效果。
我们可以用下面这种发法来实现
.touMingDiv{
min-height:300
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{
/*或者是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做一下处理。
来源： http://beyondweb.cn/article_detail.php?id=43
浏览 35643
来自: 洛杉矶
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
这php留言板确实不错
试试 pageoffice 在线打开 PDF 文件吧. pag ...
opacity: 0.5; 个人喜欢这种方式！关于其他css特 ...
推荐用StratoIO打印控件，浏览器和系统的兼容性都很好，而 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'CSS&半透明层（做遮罩层用）
&meta charset="utf-8"&
&title&半透明（用在遮罩层）&/title&
&style type="text/css"&
&*{ margin:0; padding:0;}
&#maskLayer{ width:100%; height:900
background-color:#000000; opacity:0.5;
-moz-opacity:0.5; filter:alpha(opacity=50);}
id="maskLayer"&遮罩层&/div&
&/html&&&&&&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。Html/Css标签透明度效果的实现,在html中，实现半透明背景，在HTML Div+Css编程中，为了实现版透明，通常有3中做法。
第一种是HTML5的透明，在H5中支持透明背景颜色，但遗憾的是，H5中的办透明背景颜色只支持 rgba的写法，不支持16进制的写法
background-color:rgba(0,152,50,0.7);// --&70%的不透明度
background-color:支持完全透明
在传统浏览器中，IE浏览器的独特性也是某些透明度设置的不确定性因素
一般来说,firefox和webkit,khtml阵营中实现透明的方式非常简单，也包括IE9+及大于IE9的浏览器使用上述HTML5设置透明。
第二种是使用半透明粒子图片，图案或者渐变半透明PNG图片，这种方法是兼容性兼容性的，除了IE6需要使用插件来修改PNG不透明的bug外，
支持性非常好,设置可以重复，还可以定位，在H5中也可以设置大小，不过在网页中追求极致的话加载图片越少越好。
（粒子：透明度匀称的图片裁剪至5px * 5px以下，这样加载速度要快的多）
background:url(path/my_png_bg.png) no-repeat
第三种方式是使用透明度+背景颜色或者背景图片来实现。
background-color:rgb(0,152,50);
opacity:0.7;background:url(path/my_bg.jpg) no-repeat
opacity:0.7;那么，问题来了，IE6-IE8完全不支持 opacity,所以还得考虑一下 IE的滤镜
IE中有很多滤镜，其中使用alpha通道来设置不透明度
filter:(opactity=70)
因此上述方案改造如下
background-color:rgb(0,152,50);
opacity:0.7;
filter:alpha(opacity=70);background:url(path/my_bg.jpg) no-repeat
opacity:0.7;
filter:alpha(opacity=70);
注意：opacity或者alpha的值强调的是“不”透明度
推荐使用第三种方案
&meta charset="utf-8"&
&title&Opacity&/title&
&meta http-equiv="X-UA-Compatible" content="IE=7,chrome=1.0"&
&style type="text/css" rel="stylesheet"&
padding: 0
width: 200
height: 200
margin: 100px auto 0
background-color: #f06;
.sub-mainbox
width: 250
height: 200
margin: -50px auto 0
border-radius: 5
/**background-color:rgb(0,152,50);**/
background:url(path/my_bg.jpg) no-repeat
opacity: 0.7;
filter:alpha(opacity=70);
&div class="mainbox"&
&div class="sub-mainbox"&
转载自：http://my.oschina.net/ososchina/blog/345311
filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;
透明-----css的filter，opacity与css3的background-color: rgba
css 设置元素背景为透明
html，body设置背景色透明
【前端】CSS实现背景图片透明和文字不透明效果
CSS3中两种设置透明度的方法的区别
CSS3，背景透明
没有更多推荐了，如何在css中设置半透明边框_百度知道
如何在css中设置半透明边框
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
来自知道合伙人认证行家
电脑类行家
采纳数：3372
获赞数：3772
毕业于中北大学测控技术与仪器专业，本科学位。从事编程3年，擅长电脑的问题，LTE的问题。
可以参考以下我的这个代码：XXX:{
border: 5px solid rgba(XXX, XXX, XXX, 0.5)}其中第一个XXX是你选择的需要半透明的元素接下来的XXX是你想要半透明的颜色设置透明度为0.5就可以做到半透明了。
采纳数：1543
获赞数：10494
擅长：暂未定制
百度下嘛，网上一大把。.transparent{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;}filter:alpha(opacity=50):这个是为IE6设的，可取值在0-100，其它三个0到1.-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持firefox, Safari和 Opera.
本回答被提问者采纳
采纳数：79
获赞数：121
您好，可以尝试使用border-style:border-color: rgba(250,0,255,0.7)*注意：rgba分别对应红绿蓝和透明值，其中rgb区间为0（纯黑）至255（纯色）透明度a区间为0（完全透明）至1不透明
采纳数：106
获赞数：733
擅长：暂未定制
应该是把背景图设置PNG透明的把再用CSS调取做背景
采纳数：19
获赞数：412
可以把边框的颜色设置为浅灰色呀
我要的是半透明，后面的背景能看到
其他2条回答
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。