zoukankan      html  css  js  c++  java
  • CSS利用filter/opacity实现背景透明

    设计师为了突出网页的层次感,往往会采用一些半透明元素,但对于前端实现起来可

    不是那么简单,看下图两边的左右按钮

    cssopacity.png

    先看看众所周知的解决方案

    如果我们想要一个半透明背景,有两种实现方式:

    1、利用CSS和opacity属性


    1. .opacity {
    2. filter:alpha(opacity=50);/*IE浏览器*/
    3. opacity: 0.5;/*非IE浏览器*/
    4. }
    复制代码

    2、建立一个24位PNG背景图片

    第一种利用opacity的问题除了 需要通过麻烦的语法来兼容所有浏览器, 还有不单该元素

    自身背景透明了,它的子元素会继承opacity属性,也会透明. 所以里面所有的文字也是透

    明的,这一般不是想要的效果. 你可以做一些CSS trick,通过建立额外的元素来解决这个

    问题,但这种解决方案很恶心.

    第二种,用PNG的问题是会额外增加HTTP请求, 而且图片比几行css代码要大得多- 尤其

    考虑到图片不能太小以避免 IE下24位PNG图透明时引起的内存泄漏和IE6下灰色背景的

    问题也是很常见的.

    那么有没有更好的方案来实现呢,答案是必须的,就是用RGBa colors 就可以实现轻松

    背景透明


    1. .opacity{
    2. /* RGBa, 透明度0.6 */
    3. background: rgba(0, 0, 0, 0.6);
    4. }
    复制代码

    透明将只对背景生效,很好很强大,

    但是IE是不支持RGBa的

    幸运的是IE浏览器有一个渐变过滤器(the gradient filter), 我们只需要把开始结束都设

    置成一个颜色就可以了. 你现在会想,”那我们怎么将其透明呢?”. 你只需要用16进制值

    来定义颜色就可以了. 下面是用渐变过滤器实现和上面同等透明效果的代码:


    1. .opacity {
    2.   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    3. }
    复制代码

    你可以看到定义里的8位16进制数字, 前两位代表透明度,接下来两位是红色,接着就是绿

    色和蓝色. 注意两位16进制颜色的范围是0~255(ff). 那我们怎么将0.6转化为16进制数

    呢?

    最快最好的方法就是Javascript来获取


    1. <script type="text/javascript">
    2. alert(Math.floor(0.3 * 255).toString(16));//输出"4c"
    3. alert(Math.floor(0.6 * 255).toString(16));//输出"99"
    4. </script>
    复制代码

    最后的整合代码:


    1. /* 黑色色背景,透明度0.3 */
    2. .opacity30 {
    3. background: transparent9;
    4. zoom: 1;
    5. background:rgba(0,0,0,.3);
    6. *filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000,endColorStr=#4c000000);*background:url(about:blank);
    7. }
    8. /* 黑色色背景,透明度0.6 */
    9. .opacity30{
    10. background: transparent9;
    11. background:rgba(0,0,0,.3);
    12. zoom: 1;
    13. background:rgba(0,0,0,.6);*filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#99000000,endColorStr=#99000000);
    14. }
    复制代码

    如果你添加后链接区域变小,可尝试添加*background:url(about:blank);来解决

  • 相关阅读:
    依赖注入模式【其他模式】
    缓存模式【其他模式】
    限流模式【其他模式】
    规范模式【其他模式】
    服务定位器【其他模式】
    原型继承模式【其他模式】
    Promise【其他模式】
    单态模式【其他模式】
    Git如何永久删除文件(包括历史记录)
    git中如何查看一个文件的修改(更新)历史
  • 原文地址:https://www.cnblogs.com/0621-barvo/p/4906747.html
Copyright © 2011-2022 走看看