按照以前的写法是使用两个元素来控制,一个写背景透明、一个写文字。然后通过定位: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黑色)。透明度转换表: