CSS如何获取想要颜色以及背景视觉差的实现

青旅半醒 2023-07-10 14:08 1阅读 0赞

提到CSS，颜色的设置大家经常都会为了设置合适的颜色属性，而煞费苦心，今天总结一下CSS颜色的设置，以及怎么快速提取出想要的颜色

**1.CSS中的颜色表示法**  
1.单词表示法  
background color：背景颜色 red blue green…  
2.16进制表示法  
\#000000–\#FFFFFF  
3.RGB三原色表示法  
rgb（255，255，255）;  
取值范围0-255  
红绿蓝三原色法

那么我们已经有了颜色属性的设置方法了，怎么获取得到理想中的颜色呢？  
获取网页颜色的方法：  
1.下载FE助手插件，提取网页中颜色会返回16进制表示法，并且可以直接复制得出16进制数据  
2.PS软件 截图-在PS中打开-吸管工具，不仅可以得到16进制颜色，还可以得到对于的RPG值

例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> div{ 
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <body>
        <div>
            这是一个块
        </div>
        <div style="width: 200px;height: 150px;background-color: #00000F;">
            这也是一个块
        </div>
    </body>
    </html>

**2.CSS中的背景样式**  
background-color：背景颜色  
background-image: 背景图片 url(背景地址)，默认会水平垂直都铺满背景图  
background-repeat:背景图片的平铺方式 repeat-x x轴线平铺 repeat-y repeat(x,y)(X,y 都进行平铺。默认值) no-repeat 都不平铺  
background-position： 背景图片的位置 :X y 移动（默认在左上角）  
可以使用数字的样式：  
background-position: 100px 50px;  
也可以使用单词的样式  
x：left，center，right  
y: top,center,bottom  
background-position: right bottom;  
也可以按照百分比的样式  
background-attachment：背景图随滚动条的移动方式  
scroll : 默认值 图片随浏览器移动而移动（背景位置是按照当前元素进行移动的）  
fixed ： 图片固定，不随滚动条移动（背景位置是按照浏览器进行偏移的）

例：

body{ height: 5000px;}
        div{ 
            width: 1000px;
            height: 1000px;
            background-color: red;
            background-image: url(../img/1.jpg);
            background-repeat: no-repeat;
            background-position: right bottom;
            background-attachment: scroll;
        }

视觉差的实现：  
利用：background-attachment：背景图随滚动条的移动方式

fixed ： 图片固定，不随滚动条移动（背景位置是按照浏览器进行偏移的）

例：