opacity

最新推荐文章于 2022-08-17 09:02:42 发布

helmsgao

最新推荐文章于 2022-08-17 09:02:42 发布

阅读量2k

点赞数 1

分类专栏：网页开发

本文链接：https://blog.csdn.net/love_gaohz/article/details/8677616

版权

网页开发专栏收录该内容

48 篇文章 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、火狐等浏览器

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>