zoukankan      html  css  js  c++  java
  • 背景透明度处理 兼容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 screen\,screen9 {/* 只支持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
    

    还有分享一个技术群,474471759,跟随里面的大佬一起成长,进群之后里面的JimY就是我。

    如果我的博客解决了你的问题,那请你给个关注吧!
  • 相关阅读:
    css position 和 块级/行内元素解释
    jquery.cookie.js $.cookie()是怎么使用
    css transition transform animation例子讲解
    HttpUrlConnection使用详解--转
    HttpURLConnection与HttpClient浅析---转
    java对含有中文的字符串进行Unicode编码
    VMWARE里安装时出现'SMBus Host Controller not enabled'
    消息队列 Kafka 的基本知识及 .NET Core 客户端
    安装和测试Kafka
    mongo 聚合函数
  • 原文地址:https://www.cnblogs.com/DreamSeeker/p/7879723.html
Copyright © 2011-2022 走看看