zoukankan      html  css  js  c++  java
  • CSS透明属性详解代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:

    代码如下:

    .transparent_class {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    }
    

    上面的几个属性分别是:
    opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
    filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
    -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
    -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
    CSS透明度继承问题
    但CSS的透明属性涉及到一个继承问题,当为父级元素设置透明度后,子元素将自动继承其透明度,即使你又为子元素指定透明度为1也是无效的。
    对于子元素是文字的情况,我的解决方法一般是如果多少还能够看清,就不管。另一个折衷的方法是,为文本子元素指定一个相对更深的颜色。也就是说,当子元素继承透明度后,所得到的文本颜色正好就是你想要的。前提是,这个颜色还有加深的可能,和需要详细的计算颜色和透明度的值。
    还有"取消透明度继承”的说法,这个说法是不太准确的,据我个人所知,没有任何取消透明度继承的方法。只能说,当想要实现"多个元素覆盖,只让指定的元素透明”时,可以使用的一些Hack。
    搜了一下,找到一个不错的实现这种效果的方法 – 一个关于透明继承度的问题,有兴趣的朋友可以看看。原理很简单,添加一个空元素作为透明层,和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位,实现覆盖。
    html代码
     

    代码如下:

    <div class="div3"><div class="div4"></div>这里文字图片都没透明度了 
    <div class="div2">图片</div> 
    </div> 
    

      

    CSS代码

    代码如下:

    body { 
    background-image: url(./105247.png); 
    background-repeat: repeat; 
    } 
    .div2{ 100px; height:100px; background: url(./testbok.png)} 
    .div3{ 200px; height:200px; position:relative; margin-top:10px} 
    .div4{  position:absolute; top:0; height:200px; 200px; z-index:-1; background:#FFFFFF;filter:alpha(opacity=70);opacity:0.7;}
     
    

      


    如果你外面的容器高度是不定的,那么只要把div3的高度设置的足够的高度就可以了
    这个方法有个很不好的缺点:多了一个空白的div

  • 相关阅读:
    自然语言交流系统 phxnet团队 创新实训 项目博客 (十一)
    install ubuntu on Android mobile phone
    Mac OS, Mac OSX 与Darwin
    About darwin OS
    自然语言交流系统 phxnet团队 创新实训 项目博客 (十)
    Linux下编译安装qemu和libvirt
    libvirt(virsh命令总结)
    深入浅出 kvm qemu libvirt
    自然语言交流系统 phxnet团队 创新实训 项目博客 (九)
    自然语言交流系统 phxnet团队 创新实训 项目博客 (八)
  • 原文地址:https://www.cnblogs.com/good10001/p/4774994.html
Copyright © 2011-2022 走看看