zoukankan      html  css  js  c++  java
  • CSS实现背景透明,文字不透明(兼容各浏览器)

    在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明。而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position:relative才能不继承其父元素的透明滤镜,代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Web开发者网络 - www.admin10000.com</title> 
    <style type="text/css">
    .warp{ background:#eee url(back.jpg) no-repeat left top; 440px;height:400px;    border:1px solid #ccc;}
    .content { 180px; height:260px; margin:0px auto; padding:30px 30px;background:rgba(255, 255, 255, 0.6)!important;
    filter:Alpha(opacity=60); background:#fff; /* 使用IE专属滤镜实现IE背景透明*/ }
    .content p{ position:relative;} /*实现IE文字不透明*/ 
    </style
    </head
    <body> 
    <div class="warp"> 
    <div class="content"><p>Admin10000.com 是WEB开发者学习交流必备网站。Admin10000.com 是WEB开发者学习交流必备网站。Admin10000.com 是WEB开发者学习交流必备网站。Admin10000.com 是WEB开发者学习交流必备网站。Admin10000.com 是WEB开发者学习交流必备网站。Admin10000.com 是WEB开发者学习交流必备网站。</p></div> 
    </div> 
    </body> 
    </html
     

    以上代码在IE6.0+/FF3.0+/Opera10+/Chrome/Safari 均测试通过

  • 相关阅读:
    利用dockerfile定制镜像
    发布Docker 镜像到dockerhub
    Docker 停止容器
    133. Clone Graph
    132. Palindrome Partitioning II
    131. Palindrome Partitioning
    130. Surrounded Regions
    129. Sum Root to Leaf Numbers
    128. Longest Consecutive Sequence
    127. Word Ladder
  • 原文地址:https://www.cnblogs.com/visi_zhangyang/p/4683951.html
Copyright © 2011-2022 走看看