|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
破洛洛文章简介:RGBa是一种在CSS中声明包括通明效果的色彩的办法.
RGBa是一种在CSS中声明包括通明效果的色彩的办法,它的语法是如许的:
- div{background:rgba(200,54,54,0.5);}
复制代码 它同意我们为元素增加通明色。也许我们习气了利用”opacity“,它很复杂易用,可是,opacity会使一切的子元素都酿成通明的,并且很难往办理这个成绩。(除非利用奇异的定位hack)跨扫瞄器通明一样很是辣手。
经由过程RGBa,我们能够将一个元素设置为通明,而不会影响其子元素:
声明一个保存色彩
并不是一切的扫瞄器撑持RGBa,以是假如同意的话,能够声明一个保存色采。这个色采应当是牢靠的——一切的扫瞄器都撑持。不声明就意味着,在不撑持RGBa的扫瞄器内里,没有利用色彩。- div{background:rgb(200,54,54);/*TheFallback*/background:rgba(200,54,54,0.5);}</code>
复制代码 不外,这条退路在某些古玩级扫瞄器中仍然有效。
RGBa的扫瞄器撑持情形
扫瞄器,版本,操纵体系测试了局退路Firefox3.0.5(OSX,WindowsXP,Vista)撑持—Firefox2.0.0.18(PC)不撑持纯色Safari4(DeveloperPreview,Mac)撑持—Safari3.2.1(PC)撑持—MobileSafari(iPhone)撑持—Opera9.6.1不撑持纯色IE5.5(PCviaIETester)不撑持无色IE6(PCviaIETester)不撑持纯色IE7不撑持纯色IE8beta2不撑持纯色GoogleChrome1.0.154.43撑持—GoogleChrome1.0.154.46撑持—Netscape4.8(PC)不撑持没有色彩SeaMonkey1.1.14不撑持无色SeaMonkey1.1.16不撑持纯色SeaMonkey2.0beta3撑持—Sunrise1.7.5撑持—Stainless0.2.5撑持–Flock2.0.2撑持–BlackBerryStormBrowser撑持纯色Camino1.6.6不撑持纯色下面的数据是经由过程测试demo失掉的,该测试页面包括了更多更完全的扫瞄器兼容性列表。
对IE扫瞄器的更好的退路
由于IE扫瞄器撑持前提正文,我们能够丢弃RGB并利用IE的一个公有CSS滤镜来完成一样的效果:- <!--[ifIE]><styletype="text/css">.color-block{background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);zoom:1;}</style><![endif]-->
复制代码 译自:css-tricks
一个样式规则由一个选择器后跟一个声明块组成,声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。 |
|