zoukankan      html  css  js  c++  java
  • 关于背景色半透明的实现

      好吧,国庆七天假期出去玩去了,什么都没做。。。

      言归正传,还是说说背景色半透明吧。其实说到半透明,相信绝大部分同仁应该都知道的一种很常用的方法,即css3的opacity结合ie alpha滤镜即可。比如:

    .translucent{
    	background:#000;
    	opacity: 0.5;
    	filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);
    }
    

    上面这个样式类即为一个背景色为黑色,元素半透明的样式类。这也是目前半透明遮罩层最常用的方法,(ps:有个小地方需要注意,在ie6下需要触发它的haslayout或包裹性才有效,不过一般不存在问题,因为一般这种半透明遮罩的元素都是绝对定位的,overflow:hidden;或position:absolute;或float或display:inline-block都可以触发元素包裹性..这个问题扯远了,以后会单独再出一篇关于包裹性的文)

    示例:打开

    恩,正如各位看官所见,打开的层的确半透明了,不过半透明的好彻底,以至于层里面所有子元素都半透明了...但是我的层里面的图片和那个红色的块本来是不打算透明的,我只要背景色透明就好了..所以这个方法并没有满足这个需求。

    于是,针对只要背景色透明的东东,应该有另一种办法,就是css3的rgba属性结合ie的gradient滤镜

    .bg-translucent{
    	background:rgba(0,0,0,0.5);/*前三个参数为rgb颜色,第四个参数为透明度*/
        filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);/*#7F000000的前两位为16进制透明度,后六位为16进制颜色*/
    }
    

    示例:打开

    好了,至此,也差不多可以结束了,有点凑数的嫌疑,就当自己的笔记吧。

  • 相关阅读:
    报表选型应该知道的
    报表工具——开源还是商用
    地图报表怎么做?
    关于报表在移动端展现需你需要知道哪些?
    报表怎样实现滚动的公告效果?
    加速JDBC的快捷方法
    百万级分组大报表开发与呈现
    秒级展现的百万级大清单报表怎么做
    润乾集算器技术文档汇总
    报表使用相关知识及技巧汇总
  • 原文地址:https://www.cnblogs.com/hongru/p/1844759.html
Copyright © 2011-2022 走看看