前言
如果网页只有一种颜色，那是非常可怕的。 色彩的设置丰富了网页，犹如一个多彩的世界。
在了解css颜色之前，我们先回顾一下计算机是如何显示颜色的？ 计算机根据颜色和光三基色的原理，通过各种算法来显示颜色。
css 颜色 – 颜色
网页中使用颜色关键字、十六进制字符、rgb、rgba等来表示红、绿、蓝的混合颜色，如下例所示。 几种写法都指同一种颜色（红色）：
color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)对于十六进制形式，每2位代表一种颜色，从左到右分别是红、绿、蓝，每种颜色的取值范围是00到FF。
例子：
color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*红色*/
color: #00ff00; /*绿色*/
color: #0000ff; /*蓝色*/对于rgb的表示，它由三个参数组成，分别是红、绿、蓝，每种颜色取0到255之间的值。
例子：
color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*红色*/
color: rgb(0,255,0); /*绿色*/
color: rgb(0,0,255); /*蓝色*/将 0 到 255 之间的红、绿、蓝值组合起来，总共可产生超过 1600 万种不同的颜色 (256 x 256 x 256)。
但大多数现代显示器至少能够显示 16384 种颜色。 因此，在使用颜色时要特别注意，避免设置无法显示的颜色。 您可以参考网页安全色：。
颜色除了红绿蓝三基色外，还有亮度等级，如下图所示：
rgba中的a指的是透明度，是css3新增加的属性，通过rgba可以设置更漂亮的颜色。
CSS 背景 –
元素的背景颜色和背景图片可以通过属性来设置。 语法如下：
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;在一条语句中设置所有背景属性，您可以在其中设置以下属性：
每个值均以空格分隔，无特定顺序。 有可能只允许某些值，例如：允许#url(img.png)，但至少允许一个值。
建议使用缩写属性，这样可以更好地兼容旧浏览器，并节省大量代码。 当然，你也可以单独使用它们，例如：
background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;1.背景颜色——-color
-color 与之前提到的颜色相同，可以使用十六进制、rgb、rgba等来设置颜色。 示例如下：
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
背景色1
背景色2
背景色3
背景色4
如下图所示：
注意：-颜色：； 指透明色，不显示任何颜色。
2.背景图片的使用——-图片
在html元素中添加背景图片在早期的网页制作中被广泛使用，但如今已不再建议广泛使用。 示例如下：
body {background-image:url(/static/bg.gif);}这里使用125*125尺寸的图片，如下：
但你会发现整个网页都被图片覆盖了，而上面的代码默认会从左到右、从上到下覆盖整个页面。 如果不想平铺，可以使用-设置。
背景图片 您可以同时设置多张背景图片，如下：
background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);多张图片以逗号分隔，多张图片会叠加在页面上，第一张图片显示在顶部。
效果如下：
3.背景重复法—— –
它具有以下属性：
默认。 背景图像将垂直和水平重复。
-X
背景图像将水平重复。
-y
背景图像将垂直重复。
不-
背景图像不重复。
继承自父元素-属性的设置。
示例如下：
4.背景图片的位置——-
背景图片默认显示在左上角，语法如下：
background-position: x y; // x 距离左边距离，y距离顶部距离如果你想改变它的位置，你可以使用关键字：top, , left, right 和; 或使用长度值，例如 100px 或 5cm； 您还可以使用百分比值。
x 可以取值 | 价值| 左| | 正确的。
y 可以取值百分比|数值|顶部||。
当仅设置一个值时，另一个值将默认为 。
使用关键字使背景图像水平和垂直居中：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
使用百分比%：
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%; 50% 50% 相当，显示效果与上图相同。
您还可以使用特定值，例如 px、em、cm 等。
background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px; 显示效果如下：
5.背景图像相对于容器的参考点—— –
就是设置背景图片相对于html元素的位置为初始坐标点。 句法：
background-origin: padding-box|border-box|content-box;几个有价值的意义：
-盒子
背景图像相对于填充框的位置
-盒子
背景图像相对于边界框的位置
-盒子
背景图像相对于内容框的位置
示例如下：
6.背景图片大小——-size
默认显示背景图像的原始尺寸。 您可以使用此属性来设置元素上背景图像的大小。 句法：
background-size: width height;宽度和高度可以使用数值、百分比、覆盖率等；
值：可以使用任何单位的数字，例如 px、em、cm 等。如果设置了一个值，则第二个值是“auto”。
百分比%：相对于所在html原始宽度和高度。 如果设置了一个值，则第二个值是“auto”。
cover：将背景图片扩大到足够大的尺寸，使背景图片完全覆盖背景区域。 背景图像的某些部分可能不会显示在背景锚点区域中。
：将背景图像扩展至最大尺寸，使其宽度和高度完全适合内容区域。
例子：
7. 背景图像是固定的还是与页面的其余部分一起滚动？
– 该属性具有以下值：
背景图像与页面的其余部分一起滚动。这是默认设置
固定的
背景图像是固定的
指定 – 的设置应从父元素继承
当地的
背景图像随滚动元素滚动
例如，设置不跟随页面滚动的固定背景图片：
background-attachment:fixed;
滚动滚动条，背景图像将始终固定在屏幕上的该位置。
8.背景绘图区——-clip
语法如下：
background-clip: border-box|padding-box|content-box;-盒子
默认值。 背景绘制在边框框内（夹入边框框）。
-盒子
背景绘制在填充框内（剪辑到填充框内）。
-盒子
背景绘制在内容框内（剪辑到内容框内）。
此属性类似于 – ，不同之处在于它会裁剪背景图像，如下例所示：
9.背景层混合模式——-blend-mode
所谓混合模式就是将图片和颜色或者图片和图片进行混合，语法：
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;适当的价值：
示例如下：
正常模式
亮度模式
颜色 颜色模式
您可以自行尝试其他模式，看看有什么不同。
到目前为止，我们已经学会了如何使用颜色和背景，尤其是背景的使用。 由于它有很多属性，所以可以缩写，也可以单独写。 如果你想完全掌握它，你需要多练习。 让我们看看如何结合使用每个属性的效果。
一般建议使用简写，主要是可以少写很多代码。 以上介绍难免有错误或不完整的地方，欢迎指出错误并进行补充。
好了，今天的主题就讲到这里吧，不管如何，能帮到你我就很开心了，如果您觉得这篇文章写得不错，欢迎点赞和分享给身边的朋友。
