【CSS】着色与透明

作者: 德育处主任 | 来源:发表于2017-11-22 23:55 被阅读76次

0002.jpg

  着色

方法一：十六进制

如：#3E8988 、 #6600FF等等
其中，如果两两相同，可以简写
如：#6600FF 可以简写成 #60F

方法二：RGB（Red，Green，Blue）

这种颜色值由3个数组成，每个数各代表一种色相（红、绿、蓝），每个值可以使用百分百（0%_{100%）表示，也可以使用0}255之间的数字表示。

如果想设置白色，可以使用：
rgb(100%, 100%, 100%);
或者
rgb(255, 255, 255);

方法三：使用HTML传统的颜色关键字（不建议经常使用）

颜色关键字有17个：
aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。

除此之外，大多数浏览器都支持SVG标准定义的147个颜色。

方法四：RGBA（Red，Green，Blue，Alpha）

相比起RBG，RGBA多了一个alpha通道，这个通道的作用是设定不透明度。
设定不透明度的方法是，在RGB颜色后面再加一个介于0和1之间的数字。
0表示颜色不可见，1表示颜色完全不透明（即，光线穿不透）。

color: rgba(255, 10, 20, .5)

这里的 .5 代表 0.5 的意思，0可以省略不写。

不过RGBA有一个缺点，就是 Internet Explorer 8 以及之前的版本都不支持。这个问题的解决方法是，先使用RGB设定实心颜色，再使用RGBA设定透明颜色。

color: rgb(255, 10, 20);    /* 针对 IE8 以及更早的版本  */
color: rgba(255, 10, 20, .5);    /* 针对较新的浏览器 */

方法5：HSL和HSLA（用得较少，也不那么好理解）

HSL（Hue，Saturation，Lightness），Lightness有时也用Luminance表示。
IE8及之前的版本不支持HSL，不过其他所有浏览器都支持。

hsl() 有三个值，
第一个值是角度，取值范围是0~360，对应色相圆。
红色的色相是0（也是360，因为绕完一周又回到原点），
黄色的色相值大约是50，
橙色大约是100，
绿色大约150，
一次类推，彩虹七色的色相之间大概相隔51度。

第二个值是饱和度，即颜色的纯度，取值范围是0%~100%。
0%表示完全不饱和，即暗灰。
100%表示纯色，鲜艳明亮。
其实不管色相（HSL的第一个值）是多少，只要饱和度为0%，得到的都是同样的灰度。

第三个值是亮度，取值范围是0%~100%。
0%表示全黑。
100%表示全白。
如果想活的纯色，亮度要设为50%。

HSLA的A的使用方法和RGBA的A的使用方法差不多，在HSL后面加多一个Alpha值。

 透明

transparent
这个值能把要设置的内容变成绝对透明

如：

color: transparent;

opacity
这个方法能控制透明度

如：

background: red;
opacity: 0.5;

opacity可以控制整个元素的透明度。如

div {
    background-color: red;
    color: blue;
    opacity: 0.5;
    filter:Alpha(opacity=50);
}

这时，div的背景色，字体颜色的透明度都变成50%，

filter:Alpha(opacity=50);
这句的作用是针对 IE8 以及更低版本的浏览器做兼容。

HTML与CSS 目录：HTML与CSS

网友评论

本文标题：【CSS】着色与透明

本文链接：https://www.haomeiwen.com/subject/bbdavxtx.html

【CSS】着色与透明