CSS3教程(9):设置RGB颜色

2016-02-19 15:38 8 1 收藏

今天图老师小编要向大家分享个CSS3教程(9):设置RGB颜色教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

使用新的CSS3的”RGBA”声明,不仅仅让我们像通常一样设置RGB颜色,而且还可以设置其透明度。

RGBA像RGB一样设置颜色,而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样,一个opacity值为1的元素是完全不透明的,而一个opacity为0的元素是完全透明的。

浏览器兼容性

RGBA现在在Firefox、Google Chrome和Safari中都有比较好的支持,同样不需要前缀。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

CSS3 RGBA 色彩

上面的效果有以下样式实现:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

div.rgbaL1 { background:rgba(153, 134, 117, 0.2); height:20px; }
div.rgbaL2 { background:rgba(153, 134, 117, 0.4); height:20px; }
div.rgbaL3 { background:rgba(153, 134, 117, 0.6); height:20px; }
div.rgbaL4 { background:rgba(153, 134, 117, 0.8); height:20px; }
div.rgbaL5 { background:rgba(153, 134, 117, 1.0); height:20px; }浏览器支持

Firefox(3.05+…)
Google Chrome(1.0.154+…)
Google Chrome(2.0.156+…)
Internet Explorer(IE7, IE8 RC1 )
Opera(9.6+…)
Safari(3.2.1+ windows…)

来源:https://www.tulaoshi.com/n/20160219/1610073.html

延伸阅读
说起CSS3的新特性,就不得不提到 Media Queries 。本文比较详细,所以很多实际中用不到。所以如果只是想简单了解Media Queries,推荐参考 CSS3 Media Queries 。 CSS2.1定义了 Media 的部分,包括类型、组别和规则等。CSS并非为了显示器而创造,而是应用于各种各样的媒体,比如常见的显示器,越来愈多的手持设备,可能略显过时的电视机等等。 ...
标签: Web开发
你们中有许多人可能已经听到过有关CSS3的不少传言,但是我们现在能真正用到的CSS3技巧又有哪些呢?本文,我将向你展示一些 与众不同的CSS3技巧 ,这些技巧在一些主要的浏览器中表现良好(如Firefox,Chrome,Safari,Opera浏览器)。这些效果会在不支持的浏览器中降级渲染(如IE浏览器)。使用浏览器特定的声明,许多提议的CSS3样式都可以马...
标签: Web开发
最近我因为要安装 Firebug 1.4 导致我不得不安装了 Firefox 3.5 ,所以很不小心地接触到了Wordpress后台那漂亮的文字阴影.也就是CSS中的 text-shadow 属性.所以今天我整理了一些资料,希望可以对大家有所启发. 首先我们看看wordpress 2.8后台使用了text-shadow的部分(绿色箭头).觉得怎么样?没错,这些都是CSS3属性,而不是图片做成的. te...
标签: Web开发
关于浏览器文字选中颜色 以我的系统举例(xp 默认主题),浏览器上页面文字选中后默认的背景色是一种蓝色, 不同浏览器的颜色有些许差异,但大致相同,文字颜色也近乎白色,如下图所示,截自Firefox3.6浏览器: 在CSS3的爸爸妈妈还没有相亲认识的时候,要改变页面上文字选中后的背景色以及文字颜色,就跟让太监生孩子一样困难。但是,随着CSS...
  最近闲来无事,上W3C转了一圈,粗略地浏览了一下尚未发布的CSS3,虽然还未被W3C正式发布出来,但还是能从已有的资料中窥出一些端倪,一个很明显的特征,CSS3制订得越来越细致了,某些细节之处完全超乎你所能想象的到的范围。 在这里不提及CSS3的语法,因为对于目前尚未有软件支持的CSS3,任何语法的探讨都像是空中楼...

经验教程

793

收藏

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