Heim > Web-Frontend > HTML-Tutorial > css背景透明文字不透明_html/css_WEB-ITnose

css背景透明文字不透明_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:48:22
Original
1836 Leute haben es durchsucht

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

background-color: #000;/* 一、CSS3的opacity */opacity: 0.3;  /* 兼容浏览器为:firefox,chrome,IE9+  文字也跟着透明*/
Nach dem Login kopieren
/* 二、CSS3的rgba */ background: rgba(0, 0, 0, 0.3); /* 兼容浏览器为:firefox,chrome,IE9+ 其中IE8,IE7,IE6解析为背景全透明 文字不透明 */
Nach dem Login kopieren
 /* 三、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 文字不透明*/
Nach dem Login kopieren

当要使得文字不透明,使用二,三时,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; }
Nach dem Login kopieren

解决方案二:

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage