opacity

墨蓝 2022-04-23 10:38 179阅读 0赞

opacity:0.2;/\*opacity数值越大透明度越小\*/  
filter:alpha(opacity=30);/\*opacity数值越大透明度越小\*/

教你如何设置div 半透明效果，并兼容IE Firefox等

web78\_class \{filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity: 0.6; opacity: 0.6;\}

但 FireFox 3.5+ 已不再支持 -moz-opacity  
现在都要改用opacity这个属性。

于是要设置一下透明度为57%的DIV就应该这样写了：

div.transp \{ /\* make the div translucent \*/

opacity: 0.57;                /\* Firefox, Safari(WebKit), Opera)

filter: "alpha(opacity=57)"; /\* IE 8 \*/

filter: alpha(opacity=57);   /\* IE 4-7 \*/

zoom: 1;                     /\* needed in IE up to version 7, or set width or height to trigger "hasLayout" \*/

opacity这个是属于CSS3里面的东西了，属于CSS3的标准。然而微软IE8还不支持这一属性

但如果让DIV背景半透明，而DIV中的文字不半透明呢？很简单，只要在文字的容器中加个position:relative就可以了，具体如下：

<body style="background:\#336699;">  
<div style="filter:alpha(opacity=50);background:\#ffffff;width:600;"><span style="color:yellow">图层背景半透明，字体颜色也半透明</span></div>  
<div style="filter:alpha(opacity=50);background:\#ffffff;width:600"><span style="position:relative;color:yellow">图层背景半透明，字体颜色不半透明</span></div>

[**div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器 **][div css_ _ie]

IE：外层filter，内层position:relative或absolute。

FF：外层不使用opacity，而用background:rgba()。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <style>
            #wrapper
            {
                background: #369;
                width:300px;
                height:150px;
            }
            #div1
            {
                -moz-opacity: 0.3; /* FF 3.5以下 */
                opacity: 0.3; /* FF 3.5及以上 */
                filter: alpha(opacity=30); /* IE6及以上 */
                background: #fff;
                width: 200px;
                height: 50px;
            }
            #div2
            {
                background: rgba(255, 255, 255, 0.3) !important; /* IE无效，FF有效 */
                background: #fff;
                filter: alpha(opacity=30);
                width: 200px;
                height: 50px;
            }
            #div2 span
            {
                position: relative;
            }
        </style>
     </head>
    
     <body>
    	<div id="wrapper">
            <div id="div1">
                <span>图层背景半透明，字体颜色也半透明</span>
            </div>
            <br />
            <div id="div2">
                <span>图层背景半透明，字体颜色不半透明</span>
            </div>
        </div>
     </body>
    </html>

[div css_ _ie]: http://cache.baiducontent.com/zhll3377/article/details/8162624