CSS颜色与背景

颜色的表示方式（色名、RGB、HEX、HSL）

如果使用VScode编辑器的话，在使用时可以随便输入一个颜色值，然后鼠标移动到颜色位置自由选择颜色，但是为了贴合实际开发中的设计需求，还是要了解颜色的各种表示方式。

色名

色名很简单，只需要用英文写出对应的颜色名称就可以了，比如skyblue（天蓝色）,red（红色），浏览器支持的颜色有140多种。

RGB

RGB颜色表示法是根据三原色理论，通过调节颜色中红蓝绿三种颜色的分量来调节颜色的，理论上支持超过1600万种颜色。

每个颜色分量的取值范围是0到255。

示例：

/*格式：color : rgb(红,绿,蓝)*/
color : rgb(255,0,0);/*表示纯红色*/

HEX（十六进制）

HEX 是一种常用的颜色表示方法，采用十六进制数值来表示红、绿、蓝三个颜色分量。每个颜色分量用两个16进制字符表示。

示例：

/*格式：color: #RRGGBB;*/
div {
    color: #FF0000;
}
/*表示纯红色*/

HSL

HSL表示法通过色相（Hue）、饱和度（Saturation）和亮度（Lightness）来定义颜色，是一种更接近人类视觉感知的表示方式。

Hue（色相）：表示颜色的种类，范围为0到360，通常用色轮表示。例如，0或360表示红色，120表示绿色，240表示蓝色。

Saturation（饱和度）：表示颜色的纯度，范围为0%（灰色）到100%（全色）。

Lightness（亮度）：表示颜色的明暗程度，范围为0%（黑色）到100%（白色），50%是正常亮度。

示例：

/*格式：color: hsl(色相, 饱和度, 亮度);*/
span {
    color: hsl(0, 100%, 50%);
}

/*表示纯红色*/

背景颜色与背景图片

背景颜色

背景颜色通过属性backgroundcolor来设置，属性值为颜色值。

示例：

div{
	backgroundcolor : yellow;
}

背景颜色的透明度

CSS 还允许设置带透明度的背景颜色，使用 rgba 或 hsla 格式。这里的 a 代表 alpha 通道，表示透明度，取值范围是 0（完全透明）到 1（完全不透明）。

背景图片

背景图片 是通过 background-image 属性来设置的，它允许为元素添加背景图片。你可以将图片应用于任何 HTML 元素的背景。

div {
    background-image: url("图片路径");
}

背景图片的样式设置

背景图片的重复：

默认情况下，背景图片会在元素中重复填充。如果你不希望图片重复，或者希望只在某个方向重复，可以使用 background-repeat 属性来控制。

属性值：

repeat：默认值，图片在两个方向重复。

repeat-x：图片只在水平方向重复。

repeat-y：图片只在垂直方向重复。

no-repeat：图片不重复，只显示一次。

背景图片的位置：
background-position 属性用于指定背景图片在元素中的初始位置。它可以使用关键词（如 top、bottom、center）或者使用具体的像素值和百分比来设置。

/*格式：
selector {
    background-position: x y;
}
*/

/* 将背景图片居中显示 */
div {
    background-image: url("images.jpg");
    background-position: center center;
}

/* 将背景图片放置在右上角 */
header {
    background-image: url("images.png");
    background-position: right top;
}

背景图片的大小：
background-size 属性用于设置背景图片的大小。你可以使用 cover、contain 或具体的像素/百分比值来控制图片的尺寸。

属性值：

cover：背景图片会被缩放到完全覆盖元素区域，图片可能会被裁剪。

contain：背景图片会被缩放到完整显示，可能会出现留白。

auto：保持图片原始大小。

背景图片的固定与滚动：

background-attachment 属性用于设置背景图片是随着页面滚动而滚动，还是固定不动。

属性值：

scroll：默认值，背景图片随着页面滚动。

fixed：背景图片固定在窗口，不随页面滚动。

local：背景图片随着元素的内容滚动。

简写

CSS 允许将背景颜色和背景图片组合使用，通常是通过 background 简写属性来实现。这个简写属性可以组合 background-color、background-image、background-position、background-size、background-repeat、background-attachment 等属性。

示例：

div {
    background: #ffcc00 url("images/pattern.png") no-repeat center center / cover;
}

渐变背景

CSS 渐变背景是一种允许创建平滑过渡的颜色变化效果，而无需使用图像的技术。

线性渐变

线性渐变 是沿着一条直线上发生的颜色过渡。你可以指定起点和终点颜色，颜色会沿着指定的方向逐渐变化。

语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction：指定渐变的方向，可以使用角度（如 45deg）或关键词（如 to right、to bottom 等）。

color-stop1, color-stop2, ...：定义渐变的颜色过渡点。可以是颜色值（如 red、#FF5733）以及可选的百分比值，表示颜色在渐变线上的位置。

方向

• to right：从左到右渐变。
• to left：从右到左渐变。
• to bottom：从上到下渐变。
• to top：从下到上渐变。
• to bottom right：从左上角到右下角渐变。
• 角度（如 45deg）：沿指定的角度方向渐变。

示例：

/* 指定颜色停止位置的线性渐变 */
footer {
    background: linear-gradient(to right, red 10%, yellow 50%, green 90%);
}
/*百分比指定的是色标的位置，可以不写，默认为等比分配*/
/*线性渐变还可以通过 repeating-linear-gradient 创建重复的渐变效果。*/
div {
    background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
}

效果展示：

重复渐变：

径向渐变

径向渐变 是从某个中心点向外扩散的颜色过渡。你可以指定中心点、渐变形状（圆形或椭圆形）以及颜色。

语法

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

shape：定义渐变的形状，可以是 circle（圆形）或 ellipse（椭圆形）。

size：定义渐变的大小，可以是 closest-side、farthest-side、closest-corner 或 farthest-corner。

position：指定渐变的起始点（默认是 center）。

color-stop1, color-stop2, ...：定义渐变的颜色过渡点。

形状与大小

• circle：创建圆形的渐变。
• ellipse：创建椭圆形的渐变。
• closest-side：渐变延伸到最靠近的边。
• farthest-side：渐变延伸到最远的边。
• closest-corner：渐变延伸到最靠近的角。
• farthest-corner：渐变延伸到最远的角。

示例

/* 渐变从左上角开始 */
section {
    background: radial-gradient(circle at top left, red, yellow, green);
}

/* 结合位置和大小的渐变 */
footer {
    background: radial-gradient(circle closest-side at center, red, blue, green);
}

重复径向渐变

类似于线性渐变，径向渐变也可以创建重复的效果：

div {
    background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
}

这种渐变会从中心向外重复，创建出多层次的渐变背景。

渐变使用技巧

一、透明渐变

可以使用具有透明度的颜色（如 rgba）来创建渐变效果。

div {
    background: linear-gradient(to bottom, rgba(255, 87, 51, 0.8), rgba(255, 189, 51, 0.8));
}

便于在需要叠加内容的背景中使用

二、覆盖颜色

使用渐变叠加颜色效果非常适合创建丰富的视觉效果。

div {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
}

效果相当于为背景图片添加一个具有一定透明度的蒙版，透明度在各个位置可以改变并渐变变化。

三、组合渐变

可以组合多种渐变效果，实现更复杂的背景效果。

div {
    background: 
    linear-gradient(to bottom right, rgba(190, 43, 43, 0.35), rgba(245, 245, 8, 0.35)),
    radial-gradient(circle at top left, rgba(0, 255, 0, 0.8), rgba(0, 0, 255, 0.8));
}

多个渐变效果通过逗号分隔。

浏览器将会把第一个渐变效果作为最上层，后续的效果依次叠加。

注意为前面的渐变设置透明度，否则会遮挡后面的渐变。