图老师小编精心整理的CSS实现透明效果颜色的方法:RGBa希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~
【 tulaoshi.com - Web开发 】
RGBa是一种在CSS中声明包含透明效果的颜色的方法,它的语法是这样的:
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)123
div { background: rgba(200, 54, 54, 0.5);}
它允许我们为元素添加透明色。或许我们习惯了使用opacity,它很简单易用,但是,opacity会使所有的子元素都变成透明的,而且很难去解决这个问题。(除非使用怪异的定位hack) 跨浏览器透明同样颇为棘手。
通过RGBa,我们可以将一个元素设置为透明,而不会影响其子元素:
声明一个保留颜色并非所有的浏览器支持RGBa,所以如果允许的话,可以声明一个保留色彩。这个色彩应该是可靠的所有的浏览器都支持。不声明就意味着,在不支持RGBa的浏览器里面,没有使用颜色。
1234
div { background: rgb(200, 54, 54); /* The Fallback */ background: rgba(200, 54, 54, 0.5);}/code
不过,这条退路在某些古董级浏览器中依然无效。
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)RGBa的浏览器支持情况上面的数据是通过测试demo得到的,该测试页面包含了更多更完整的浏览器兼容性列表。
对IE浏览器的更好的退路因为IE浏览器支持条件注释,我们可以抛弃RGB并使用IE的一个私有CSS滤镜来实现同样的效果:
123456789
!--[if IE] style type="text/css" .color-block { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); zoom: 1;} /style![endif]--译自:
来源:http://www.tulaoshi.com/n/20160219/1630746.html
看过《CSS实现透明效果颜色的方法:RGBa》的人还看了以下文章 更多>>