• 技术文章 >web前端 >html教程

    兼容性背景颜色半透明CSS代码(不影响内部子元素)

    2016-08-30 09:21:11原创1780
    如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响。

    兼容所有浏览器的背景颜色半透明CSS代码:

    background-color: rgba(0, 0, 0, .25);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);

    注意:startColorStr 和 endColorStr 的值,前两位是十六进制的透明度,后面六位是十六进制的颜色。

    其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。

    2位透明度的换算方法:x=alpha*255 ,将计算的结果 x 转换成十六进制即可。

    js换算16进制方法: x.toString(16)

    例如:上面的 0.25 透明度,换算为IE的AA透明度: var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40

    Demo示例:

    
    
    class="menu-nav-bg"> "#">我的首页 | "#">我的微博

    思想:现代浏览器使用 CSS3 RGBA 实现半透明背景色,IE使用 渐变滤镜 filter: progid:DXImageTransform.Microsoft.Gradient 实现半透明。

    注意:不能使用 opacity:0.5 属性或是 IE filter:alpha(opacity=50) 半透明滤镜,因为这种半透明属性会让子元素也跟着半透明。

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:兼容性背景颜色半透明CSS代码(不影响内部子元素)
    上一篇:移动端web开发总结 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• ajax基本介绍• float浮动• 使用jQuery实现地址联动• “娜喊杯”HTML5行业颁奖盛典盛大开幕_html/css_WEB-ITnose• 请问这是什么字体,帮写下CSS呗!!!_html/css_WEB-ITnose
    1/1

    PHP中文网