Home > Web Front-end > HTML Tutorial > css background transparent text opaque_html/css_WEB-ITnose

css background transparent text opaque_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:48:22
Original
1830 people have browsed it

测试背景透明度为0.3。文字不透明:

background-color: #000;/* 一、CSS3的opacity */opacity: 0.3;  /* 兼容浏览器为:firefox,chrome,IE9+  文字也跟着透明*/
Copy after login
/* 二、CSS3的rgba */ background: rgba(0, 0, 0, 0.3); /* 兼容浏览器为:firefox,chrome,IE9+ 其中IE8,IE7,IE6解析为背景全透明 文字不透明 */
Copy after login
 /* 三、IE专属滤镜 */ filter:alpha(opacity=30); *zoom: 1; /* 兼容浏览器为:IE6,7,8,9(需触发haslayout)* 文字透明 当设置div里面元素的属性为rel相对定位,文字不透明*/ /*或*/filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);*zoom: 1;  /*兼容浏览器也是IE6,7,8,9  无须设置rel 文字不透明*/
Copy after login

当要使得文字不透明,使用二,三时,ie9两个属性都支持一起使用会重复降低不透明度。

解决方案一:

①只针对ie7,8使用滤镜,其他用rgba处理。

②或者使用:root .test{filter:none;}可以去除IE9下的滤镜 (推荐使用,代码量少)

注意:据说是IEtester不支持滤镜,所以测试不到ie6的效果

        .box {            background: rgba(0, 0, 0, 0.3);        }        @media \0screen\,screen\9  {            /* 只支持IE6、7、8 */            .box {                background-color: #000;                filter: alpha(opacity=30);                *zoom: 1;            }        }        .box p { position: relative; }
Copy after login

解决方案二:

 

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template