CSS初学——关于上色的两种方式

最新推荐文章于 2024-09-30 15:56:28 发布

原创最新推荐文章于 2024-09-30 15:56:28 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS布局

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种将RGB颜色值转换为CSS颜色值的方法，通过实际案例演示了如何使用rgb(r,g,b)和十六进制颜色值#RRGGBB在网页设计中准确表示颜色。

今天心血来潮，看到网上有个不错的图片，想着靠代码弄出来，但是在图片下载好的那一刻，我犯了难。
因为图片的主色调就两个颜色，而且颜色又十分相似，虽说自己不是色盲，但是总不能说拿着图片来一个个对比CSS颜色值吧，毕竟在翻CSS颜色的时候看到了这样一个标题：
在这里插入图片描述
当然，没有人会傻到真的一个个去翻，当然是选择最接近的颜色，但是，到几个相近颜色的时候却犯了难，虽说可以随便找个相近颜色，但是有时候有必要一定要到某个值的颜色时会怎么办？
当然，我使用了PS来得到了该颜色的rgb，其rgb为（243,243,243），颜色呈灰色，我在翻颜色值时候，看到了如下结果：
在这里插入图片描述
rgb（240,240,240）的值为#F0F0F0，而rgb（248,248,248）的值为#F8F8F8，那么，我想要的值如下：

当然，它的下方也悉心地给出了#f3f3f3的提示，于是得出了如下的一个测试demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        body {
           background-color: black; 
        }
        #one {
            background-color: #F3F3F3;
            width: 300px;
            height: 300px;
            float: left;
            font-family: 'Comic Sans MS';
        }    
        #two {
            background-color: white;
            width: 300px;
            height: 300px;
            float: left;
           font-family: '仿宋';
        }
    </style>
</head>
<body>
    <div id="one">I am #f3f3f3f</div>
    <div id="two">我是white</div>
</body>
</html>

代码结果如下：
在这里插入图片描述
很显然，测试算是成功了，但是在如果知道了rgb，其实可以使用更简单的方式来定义颜色：rgb（r，g，b），这个效果一样可以得出应有的颜色，而且在日常使用中能够更为有效地去定义颜色
而后，我把代码中灰色部分更改为：

/* background-color: #F3F3F3; */
            /* 也可以使用“rgb（r，g，b）”的方式来上色 */
            background-color: rgb(243,243,243);

结果同样奏效。