zoukankan      html  css  js  c++  java
  • [技巧心得] 背景半透明最佳实践

    rgba色彩 + Gradient Filter

    其实我们可以选用 background-color: rgba() 来实现,同样可以实现透明效果,并且

    只应用于当前元素,不继承。而 IE 的 filter 有很多滤镜效果。其中的渐变滤镜,只要

    变通一下,就可以实现我们想要的效果,并且这个滤镜不会被下级元素继承,这样元素

    的内容就不会被虚化。代码如下:


    1. /*
    2. * filter 渐变滤镜详细用法,[参见这里]
    3. * StartColorStr 和 EndColorStr:
    4. *    #4c000000 是 30% 透明度的 #000000 的意思
    5. *    组成: # + 透明度 + 颜色
    6. *    算法: Math.floor(0.6 * 255).toString(16);
    7. */
    8. .rgba{
    9.     background:rgba(0, 0, 0, 0.3);
    10.     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');
    11. }
    复制代码

    不过,我们得到的效果是这样的,IE9 的透明度竟然有 60%!! 这显然不是我们想法

    的。原因是:IE9 也支持 filter,使得 filter 的结果和 background-color 叠加,所以

    是 60%。具体参见 DEMO 和示例图:

    transparentbg-2.png
    那么我们可以利用 IE 的 HACK,单独把 IE9 的 filter 变成透明度为 0 即可。高级浏

    览器大部分支持 :root 伪类,但不支持 filter 属性,而 IE 只有 IE9 支持,所以我们可

    以这样写。代码如下:


    1. :root .rgba{
    2.     filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');
    3. }
    复制代码

    当然,第二种方法可以应用于 background,也可应用于 border 上。整体的代码可参

  • 相关阅读:
    LeetCode:43. Multiply Strings (Medium)
    LeetCode: 50. Pow(x, n)
    Web服务器、Web容器、Application服务器、反向代理服务器的区别与联系
    LeetCode:49. Group Anagrams(Medium)
    Java:String、StringBuffer、StringBuilder
    Java:泛型
    spring项目中web-inf下不能引用页面资源
    css Hack
    a标签的嵌套
    css中的绝对定位与相对定位
  • 原文地址:https://www.cnblogs.com/0621-barvo/p/4906744.html
Copyright © 2011-2022 走看看