背景透明度处理兼容IE

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         /*CSS*/
 8         body{
 9             width: 100%;
10             background:url(http://c.hiphotos.baidu.com/image/pic/item/9358d109b3de9c82bb3ff8456581800a18d843a5.jpg) no-repeat;
11         }
12         .con{
13             width: 600px;
14             height: 300px;
15             padding:20px 0;
16           background-color: rgba(0,0,0,0.6);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
17         }
18         .con p{
19           color: #FFFFFF;
20         }
21 
22         /*针对IE6、7、8浏览器，我们可以采用fiter:Alpha，针对标准浏览器我们采用rgba，那么问题来了，IE9浏览器2个属性都支持，一起使用会重复降低不透明度...*/
23 
24         @media \0screen\,screen\9 {/* 只支持IE6、7、8 */
25           .con{
26             background-color:#000000;
27             filter:Alpha(opacity=60);
28             position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
29             *zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
30           }
31           .con p{
32             position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
33           }
34         }
35 
36         /*HTML代码*/
37     </style>
38 </head>
39 
40 <body>
41 <div class="waps">
42   <div class="con">
43     <p>CSS实现背景透明，文字不透明（各浏览器兼容）CSS实现背景透明
44     </p>
45   </div>
46 </div>
47 </body>
48 </html>
49 原文链接：https://www.cnblogs.com/PeunZhang/p/4089894.html

posted @ 2017-11-22 16:10 佳明兄阅读(678) 评论(0) 收藏举报

刷新页面返回顶部

DreamSeeker

仰天大笑出门去，我辈岂是蓬蒿人

背景透明度处理兼容IE

公告

DreamSeeker

仰天大笑出门去，我辈岂是蓬蒿人

背景透明度处理 兼容IE

公告

背景透明度处理兼容IE