加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

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

发布时间:2020-12-14 19:50:04 所属栏目:资源 来源:网络整理
导读:如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响。 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba( , ,. =# ,endColorStr=# ); 注意: startColorStr 和 endColorStr 的值,前两位是十六进制的透明度,后面六位是十六进制的

如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响。

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

background-color: rgba(,,.=#,endColorStr=#);

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

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

x=alpha*255

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

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

Demo示例:

=> >我的首页 | >我的微博

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读