IT兄弟连 HTML5教程 CSS3属性特效 新增颜色模式

5f16a58a57bc47108e1c532aebeafd05.jpg

 

对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分。网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了更多的选择。CSS3可以让网页增添了不少的动画元素,让我们的网页变得更加生动有趣,并且易于交互。本章利用CSS3的样式属性来制作出丰富多彩的网页。在本章中,我们为CSS3的样式属性作一个介绍,列出该属性的属性及用法。使用该样式属性制作一些小案例来对网页样式进行设置。让读者可以更加直观清晰地了解到CSS3的样式属性,并能够立即使用它。通过本章的学习,读者就可以利用CSS3为自己的网站锦上添花了。

新增颜色模式

CSS3样式新增了一种颜色模式rgba,比CSS的颜色模式多了一个透明度的设置。RGB对于大家来说一点不陌生,它就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是什么呢?说得简单一点就是在RGB的基础上加进了一个通道Alpha。新增颜色模式的参数说明如表1所示。

表1  CSS3新增颜色模式参数说明

 

8275aa5e53af47f7bbccde7af5353a45.png

 

如果庞统说rgba是制作透明色(透明背景色、透明边框色、透明前景色等),大家不由会想起opacity这个东西。它在我们CSS2中制作背景色通常用到,可是要用它来制作边框色或都说前景色的话,无法实现这个功能。这里利用一个实例对rgb和opacty同时使用与rgba使用作对比,代码如下所示:

使用浏览器直接打开这个文件,就可以看到浏览器对这个网页文件解释后的结果,效果中我们可以看出,他们相同之处就是背景色完全是一样的,但区别就是一直让大家觉得头痛的问题,那就是opacity后代元素会随着一起具有透明性,所以我们opacity中的字随着透明值下降越来越看不清楚,而RGBA不具有这样的问题。如图1所示:

从我们上面的实例中可以看出,RGBA比为元素设置CSS的透明度更好。因为单独的颜色不影响整个元素的透明度,也不会影响到元素其它的属性,比如说边框,字体。同时为某元素设置rgba,也不会影响到其他元素的相关透明度。

ffde7db52fd6484bb08eedcccf7ccb41.jpg

图1  opacity与rgba透明度对比

posted on 2019-11-11 10:49  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航