zoukankan      html  css  js  c++  java
  • rgba兼容IE系列

    在容器里面如果用到opacity或者filter:opacity里面的内容也会被滤镜化

    如果不想里面的内容也被滤镜化我们可以用rgba来处理或者用透明的背景图片。

    兼容ie的rgba的写法

    background: rgba(0,0,0,0.75);-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#bf000000',EndColorStr='#bf000000')

    其中 StartColorStr,和EndColorStr 的参数分别代表:透明度以及颜色。

    这种写法兼容ie6 7 8 10 。但是ie9两者滤镜叠加了。所以以下ie hack处理一下

    <!--[if lte IE 8]>

    <style>

    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#bf000000',EndColorStr='#bf000000');

    </style>

    <![endif]-->

    HTML代码 

    <div class="warpper">
        <div class="inner">
        a<br>a<br>a<br>a<br>a<br>a<br>a<br></div>
    </div> 

    CSS代码

    <!--[if lte IE 8]>
        <style>
        .warpper
    {filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#bf000000',EndColorStr='#bf000000')};
        </style>
    <![endif]-->
    <style>
        .warpper
    {padding:10px;width:200px;height:200px;background:rgba(0,0,0,0.5);}
        .inner
    {background:#ff0;}
    </style> 

     

    由于这个滤镜实现是不能像遮罩一样遮住别的元素,所以在做大的弹出框的时候还是需要按照传统的方式另外的添加一个div元素来遮住。

    这样的方式只是适合于 小的边框阴影。



  • 相关阅读:
    性能测试工具---loadrunner
    数据库Mysql监控及优化
    数据库基础----Mysql
    常见的性能问题及定位方法
    中间件
    JVM学习篇章(二)
    PhpStorm 配置本地断点调试
    TCP连接 三次握手 四次挥手
    https 的理解
    使用GatewayWorker 开发个即时聊天demo
  • 原文地址:https://www.cnblogs.com/heimanba/p/3810720.html
Copyright © 2011-2022 走看看