CSS实现透明效果颜色的方法:RGBa

2016-02-19 23:50 68 1 收藏

图老师小编精心整理的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

延伸阅读
标签: Web开发
大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: html head titlecss圆角效果/title meta http-equiv="content-type" content="text/html; charset=gb2312" style type="text/css" div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: ...
步骤是这样的: 1.先把你想要做的图片放到PS里面进行去色处理-图像–调整–去色或者ctrl+shift+u 2.将此图和原图片整合成上下两张的图片,如下图: 3.下一步写下代码: xhtml代码: div id="box" a href="#" span/span /a /div CSS代码: a {float:left;}#box s...
标签: Web开发
css 解决覆盖父元素透明度 的效果 css兼容浏览器的透明度写法 1.{opacity:0.3;filter:alpha(opacity=30);} css是不能做到兼容覆盖透明度的 如果父元素设置了透明度,那么子元素是不能比父元素的透明度高,所以可以用以下办法实现类似效果 1.div id="bgttt" style="opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0; ba...
标签: Web开发
    css3可以轻松实现很多譬如图片边框、多重背景、文字阴影等效果,但是目前支持css3的浏览器少之又少,往往了实现圆角效果要去写一堆代码,下面介绍的这些强大的jQuery插件可以轻松帮你实现很多复杂的视觉效果。    在这之前我们先来看一下几个CSS3实例代码是怎么实现各种效果的。 1.多重背景 #backgrounds-...
标签: Web开发
脚注(Footnote)是向用户提供更多信息的一个最佳途径,也是主体信息的一个有效补充,常见于各种印刷书籍中。不过,既然脚注有这些好处,我们当然要在网页中也加以利用,本文向您介绍了用Javascript和CSS实现脚注效果的方法。 Javascript: script type="text/javascript" // 说明:用 Javascript 和 CSS 实现脚注(Footnote)效果 /...

经验教程

824

收藏

24
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部