第6章 CSS3颜色特性

最新推荐文章于 2021-08-20 23:47:26 发布

itzyjr

最新推荐文章于 2021-08-20 23:47:26 发布

阅读量229

点赞数

分类专栏：《图解CSS3:核心技术与案例实战》读书笔记

本文链接：https://blog.csdn.net/itzyjr/article/details/106424108

版权

《图解CSS3:核心技术与案例实战》读书笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

㊀网页中的色彩特性

在Web页面的设计中，颜色主要运用16进制数值的表示方法，为了用HTML表现RGB颜色，使用十进制0~255，对应十六进制00~FF。在HTML编码中“000000”就是指R、G、B都没有，就是0状态，也就是黑色。相反“FFFFFF”就是R、G、B都是255，也就是白色。

为了解决Web调色板的问题，人们一致通过了一组在所有浏览器中都类似的Web安全颜色。这些颜色使用了一种颜色模型，在这个模型中，可以使用相应的十六进制值00、33、66、99、CC和FF来表达三原色(RGB)中的每一种。简单点说，Web页面的安全色是当红色(R)、绿色(G)和蓝色(B)颜色数字信号为0、51、102、153、204和255构成的颜色组合，它一共有6×6×6=216种颜色(其中彩色210种，非彩色6种)。而216种特定的颜色就可以安全地应用于所有Web中，而不需要担心颜色在不同硬件环境、操作系统、浏览器之间的变化。

Web设计师并不需要一味地追求使用局限于216种Web页面安全色，而是应该更好地搭配使用安全色和非安全色。也就是说网页安全色和非安全色搭配得恰当，才不会让用户看到的效果与设计制作时相差太远。

色彩模式：

1.RGB色彩模式：光的三原色红、绿、蓝混合产生。

2.CMYK色彩模式：颜料的三原色青色、洋红、黄色加上黑色。主要用于出版印刷时制作图像的一种模式。

3.索引色彩模式：限定在256种颜色以内的模式，主要用于Web页面安全色彩和制作透明GIF图片。

4.灰度模式：无色彩模式，主要处理黑、白、灰色图片。

5.双色调模式：是在黑白图片中加入颜色，使色调更加丰富的模式。

6.位图模式：是用白色和黑色共同处理图片的模式。

㊁透明属性

opacity:alphavalue || inherit
—————————————————————————————
alphavalue：默认值1，可以取0~1任意浮点数。0:完全透明，1:完全不透明。
inherit：表示继承父元素的opacity设置的值，即继承父元素的不透明性。

颜色透明度可以分为alpha和opacity两种。alpha通道是用来对元素设置透明度，针对元素的背景色、文字颜色、边框颜色等设置透明度。opacity却只能给整个元素设置一个透明度，并且其透明度直接会继承给其后代元素。

实战体验：制作透明过渡色块

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Opacity制作过渡色块</title>
    <style>
        .row {
            overflow: hidden;
        }
        .row div {
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            float: left;
        }
        .row:nth-of-type(1) div {
            background: #000;
            color: #fff;
        }
        .row:nth-of-type(2) div {
            background: red;
        }
        .row:nth-of-type(3) div{
            background: green;
        }
        .row:nth-of-type(4) div{
            background: blue;
        }
        .row div:nth-child(1){
            background: #000;
            color: #fff;
        }
        .row div:nth-child(2){
            opacity: 1;
        }
        .row div:nth-child(3){
            opacity: 0.8;
        }
        .row div:nth-child(4){
            opacity: 0.6;
        }
        .row div:nth-child(5){
            opacity: 0.4;
        }
        .row div:nth-child(6){
            opacity: 0.2;
        }
        .row:nth-of-type(1) div {
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="demo">
    <div class="row">
        <div></div>
        <div>1</div>
        <div>0.8</div>
        <div>0.6</div>
        <div>0.4</div>
        <div>0.2</div>
    </div>
    <div class="row">
        <div>red</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div>green</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div>blue</div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</body>
</html>

㊂㊃㊄

itzyjr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第6章 CSS3颜色特性

㊀网页中的色彩特性在Web页面的设计中，颜色主要运用16进制数值的表示方法，为了用HTML表现RGB颜色，使用十进制0~255，对应十六进制00~FF。在HTML编码中“000000”就是指R、G、B都没有，就是0状态，也就是黑色。相反“FFFFFF”就是R、G、B都是255，也就是白色。为了解决Web调色板的问题，人们一致通过了一组在所有浏览器中都类似的Web安全颜色。这些颜色使用了一种颜色模型，在这个模型中，可以使用相应的十六进制值00、33、66、99、CC和FF来表达三原色(RGB)中的每一
复制链接

扫一扫