按照以前的写法是使用两个元素来控制,一个写背景透明、一个写文字。然后通过定位:absolute和层级:z-index来控制。现在我们可以通过如下方法使用一个元素来控制: 在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明。而IE6/7/8浏览器不支持rgba,只有使用IE的专属特性filter:属性来制作透明背景。
.caibaojian{ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */} :root .caibaojian{ filter:none;/*IE9不需要filter*/ background:#000; background: rgba(0, 0, 0,0.5); }
这里需要注意的是startColorStr和endColorStr的值#80000000,其中前两位是十六进制的透明度80,也就是透明值为0.5而后面六位是十六进制的颜色#000000(black黑色)。透明度转换表:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。