理解CSS前景色和透明度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了理解CSS前景色和透明度相关的知识,希望对你有一定的参考价值。

前面的话

  颜色的出现让网页不再只是黑白,运用好颜色设计,能让网页增色不少。一个网页给人们留下的第一印象实际上就是它的整体颜色。关于如何设置颜色,请移步CSS的6种颜色模式实际上,颜色的应用主要分为前景色、背景色和透明三个部分。本文主要介绍前景色和透明度。

 

color前景色

  值: <color> | inherit

  初始值: 用户代理特定的值

  应用于: 所有元素

  继承性: 有

【影响边框】

  一般来说,前景是元素的文本,不过前景还包括元素周围的边框。有两种方式直接影响一个元素的前景色,可以使用color属性,也可以使用属性border-color设置边框颜色

【继承颜色】

  color是可以继承的,可以把文档中的所有正常文本设置为某种颜色,如通过声明body{color:red;}设置为红色。这会把所有没有其他样式的文本变成红色(如锚就不包含在内,锚有其自己的颜色样式)。但浏览器对表单类元素有预定义的颜色,使body颜色无法继承到表单类元素中

opacity透明(IE8-浏览器不支持) 

  opacity是CSS3中专门用来设置透明度的一个属性,opacity只能给整个元素设置一个透明度,并且其透明度直接会继承给其后代元素

  值: value | inherit

  value:默认值是1,可以取0-1的任意浮点数。其中,1表示完全不透明,0表示完全透明

  初始值: 1

  应用于: 所有元素

  继承性: 无

【兼容性】

  IE8-浏览器不支持opacity透明属性,可以使用其专用的滤镜来实现opacity透明属性的透明效果

  filter:alpha(opacity=透明值),该透明值是0-100之间的任意整数

opacity: 0.8;
filter:alpha(opacity=80);

 

以上是关于理解CSS前景色和透明度的主要内容,如果未能解决你的问题,请参考以下文章

向 Iteml QML 添加前景色

CSS颜色样式

ASP.NET中TreeView的使用,前景色无法设置,点击事件无法响应,点击后总闪烁,怎么解决?谢谢!

其他样式

颜色-前景色

如何在 PHP 中使用 GD 设置透明背景?