
之前做了個半透明彈層,但設(shè)置背景半透明時,子元素包含的字體及其它元素也都變成了半透明。對opacity這個屬性認識的不透徹,在這里做一些總結(jié),方便以后使用。
背景透明,文字不透明的解決方法:
為元素添加一個絕對定位的子元素,設(shè)置大小和該元素一樣,把半透明加在絕對定位元素上作為遮罩,z-index設(shè)置到最底部,達到背景半透明效果。
使用CSS3新屬性rgba。
實現(xiàn)透明的方法:
css3的opacity,取值從 0 到 1,如opacity : 0.5,IE9及以上版本和標準瀏覽器都支持。IE8 以及更早的版本支持替代的 filter 屬性,例如:filter : Alpha(opacity=50)。
css3的rgba(red, green, blue, alpha),alpha的取值從 0 到 1,如background-color : rgba(255,255,255,0.5)。
谷歌瀏覽器下測試各種屬性,如下圖。