CSS 背景样式全解析
在网页设计中，背景样式是塑造页面视觉效果的关键元素之一。通过 CSS 的背景属性，我们可以为页面添加丰富的视觉效果，包括背景颜色、背景图片、平铺方式、定位以及固定等。
4.1 背景颜色 (background-color)
背景颜色是最基础的背景属性，用于设置元素的背景色。
div {
width: 200px;
height: 200px;
/* 默认值为 transparent（透明） */
/* background-color: transparent; */
background-color: pink;
}
- 默认值：
transparent（透明） - 可接受的值：颜色名称、十六进制值、RGB 值、RGBA 值
- 应用场景：为元素提供基础底色，或作为背景图片的补充
4.2 背景图片 (background-image)
使用背景图片可以为元素添加更丰富的视觉效果。
#image-test {
width: 200px;
height: 340px;
background-image: url(picture/Q.png);
}
- 语法：
background-image: none | url(图片地址) - 默认值：none（无背景图）
- 实际应用：常用于 logo、装饰性小图片或超大背景图，便于精确控制位置
4.3 背景平铺 (background-repeat)
控制背景图片是否以及如何在元素中平铺。
#image-test {
background-image: url(picture/Q.png);
/* 可选值：repeat | no-repeat | repeat-x | repeat-y */
background-repeat: no-repeat;
}
repeat：默认值，在水平和垂直方向都平铺no-repeat：不平铺，只显示一次repeat-x：仅在水平方向平铺repeat-y：仅在垂直方向平铺
注意：背景图片会覆盖背景颜色
4.4 背景图片位置 (background-position)
精确控制背景图片在元素中的位置。
#image-test {
background-image: url(picture/Q.png);
background-repeat: no-repeat;
/* 语法：background-position: x y; */
background-position: right center;
}
位置参数可以是：
- 方位名词：
left、center、right（水平方向）；top、center、bottom（垂直方向） - 精确单位：像素 (px)、百分比 (%) 等
- 混合单位：方位名词与精确单位结合
使用规则：
- 两个方位名词：顺序无关，如
left top与top left效果相同 - 一个方位名词：另一个方向默认居中
- 精确单位：第一个值是 x 坐标，第二个值是 y 坐标
- 混合单位：第一个值是 x 坐标，第二个值是 y 坐标
示例应用：为文字添加小图标
h3 {
width: 118px;
height: 40px;
font-size: 14px;
text-indent: 1.2em;
line-height: 40px;
font-weight: 400;
background-image: url(picture/down.jpeg);
background-repeat: no-repeat;
background-position: left center;
}
4.5 背景图像固定 (background-attachment)
控制背景图片是否随页面滚动而移动，常用于制作视差滚动效果。
body {
background-image: url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png);
background-repeat: no-repeat;
background-position: center 0px;
background-attachment: fixed;
/* 背景图像固定 */
}
scroll：默认值，背景图像随内容滚动fixed：背景图像固定不动
4.6 背景属性复合写法
为了简化代码，CSS 允许将多个背景属性合并为一个简写属性。
body {
/* 复合写法顺序：颜色 图片 平铺 滚动 位置 */
background: black url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png) no-repeat fixed center 0px;
}
复合写法没有严格的顺序要求，但建议遵循约定顺序：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
4.7 背景色半透明 (rgba)
通过 RGBA 颜色值可以实现背景色的半透明效果，而不影响元素内的文本内容。
div {
width: 300px;
height: 300px;
/* 最后一个参数是透明度，0~1 之间 | 0.3 也可以写成 .3*/
background-color: rgba(245, 5, 5, 0.3);
}
- 语法：
background: rgba(red, green, blue, alpha); - alpha 参数：0 表示完全透明，1 表示完全不透明（0.3 可以写成 .3，其他同理）
- 特点：仅使背景色半透明，内容不受影响
综合代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 背景</title>
<!-- 通过 CSS 背景属性，可以给页面添加背景样式 -->
<!-- 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等 -->
<style>
/* 111.--------- 背景颜色 -------- 语法：background-color:颜色值 一般情况下，背景颜色默认值是 transparent(透明)，我们也可以手动指定背景颜色为透明色 */
div {
width: 200px;
height: 200px;
/* transparent(透明的，清澈的) */
/* background-color: transparent; */
background-color: pink;
}
/* 222.--------- 背景图片 ------------ 语法：background-image:none | url(url) 参数：none（无背景图，默认） url(使用绝对或相对地址指定背景图像) background-image 属性描述了元素的背景图像，实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置 (因为有 background-position 控制插入位置)（精灵图也是一种运用场景） */
/* 333.-------- 背景平铺 ------------ 如果需要在 HTML 页面上对背景图片进行平铺，可以使用 background-repeat 属性 语法：background-repeat: repeat | no-repeat | repeat-x | repeat-y 1. repeat 背景图像在纵向和横向上平铺 (默认的) 2. no-repeat 背景图像不平铺 (不重复，只会显示一次) 3. repeat-x 背景图像在横向上平铺 4. repeat-y 背景图像在纵向平铺 注意：背景图片会覆盖掉背景颜色 */
#image-test {
width: 200px;
height: 340px;
background-image: url(picture/Q.png);
/* background-repeat: repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
background-repeat: no-repeat;
/* background-position: center(y) right(x); 与下面等价，跟顺序没有关系 */
/* background-position: right(x) center(y); */
/* 此时，第一个参数是 x 轴，水平 (x) 一定是靠右侧对齐;第二个参数省略 y 轴，则竖直方向是居中显示的 */
/* background-position: right; */
/* 此时，第一个参数一定是 y 轴，顶部对齐;第二个参数省略 x ,则水平方向是居中显示的 */
background-position: top;
}
/* 444.--------- 背景图片位置 --------- 利用 background-position 属性可以改变图片在背景中的位置 语法：background-position: x y; 参数代表的意思是：x 坐标 和 y 坐标。可以使用方位名词或精确单位 参数值： 1.length --》百分数 | 由浮点数字和单位标识符组成的长度值 2.position --》top | center | bottom (这三个是竖直方向 (y) 上)| left | center | right (这三个是水平方向 (x) 上)方位名词 注意事项： 11.参数是方位名词： 1.如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top(左上) 和 top left（上左）效果一样 2.如果只指定了一个方位名词 (如果第一个参数是 x，则第二个为 y，反之同理)，另一个值省略，则第二个值默认居中对齐 22.参数是精确单位： 1.如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个肯定是 y 坐标 2.如果只指定一个竖直，那么该数值一定是 x 坐标，另外一个默认垂直居中平 33.参数是混合单位： 1.如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标 *//* 参数是方位名词 */
h3 {
width: 118px;
height: 40px;
/* background-color: skyblue; */
/* 字体大小修正 */
font-size: 14px;
/* 文字开头间隔 */
text-indent: 1.2em;
/* 实现文字水平居中 */
line-height: 40px;
/* 取消文字加粗 */
font-weight: 400;
background-image: url(picture/down.jpeg);
background-repeat: no-repeat;
/* ----方位名词----*/
background-position: left center;
}
/* 超大王者荣耀背景图片 (注意下面也有一个用于测试混合单位的 body) *//* body { background-image: url(picture/nonyao.webp); background-repeat: no-repeat; 方位名词 (取消 body 注释后，把这个注释掉) background-position: center top; } *//* 参数是精确单位 */
#image-test2 {
width: 200px;
height: 340px;
background-image: url(picture/Q.png);
background-repeat: no-repeat;
/* 50px 20px --> x 轴一定是 50px y 轴一定是 20px */
/* background-position: 50px 20px; */
/* 80px 一定是 x 坐标，另外一个默认垂直居中 */
background-position: 80px;
}
/* 参数是混合单位 *//* 超大王者荣耀背景图片 *//* body { background-image: url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png); background-repeat: no-repeat; 混合单位 第一个单位一定是 x，第二个单位一定是 y background-position: center 0px; } *//* 555.------- 背景图像固定 (背景附着) ------ background-attachment 属性设置图像是否固定或者随着页面的其余部分滚动 (后期可以制作视差滚动效果) 语法：background-attachment: scroll | fixed 参数：scroll --》背景图像是随对象内容滚动 (默认，正常效果) fixed --》背景图像固定 *//* 666.------- 背景属性复合写法 -------- 当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为： background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 */
body {
/* background-image: url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png); */
/* background-repeat: no-repeat; */
/* background-position: center 0px; */
color: white;
/* 测试背景图像固定 */
/* background-attachment: fixed; */
background-color: black;
/* 测试背景属性复合写法 */
background: black url(https://game.gtimg.cn/images/yxzj/web202311/bg-5ada2842.png) no-repeat fixed center 0px;
}
/* 777.--------- 背景色半透明 --------- 语法：background: rgba(0,0,0,0.3); (数值仅仅为举例子) 1.最后一个参数是 alpha(透明度),取值范围在 0~1 之间 (0 为完全透明，1 为完全不透明 (跟原来一样),从 1->0，越来越透明) 2.背景半透明指的是盒子背景色半透明，盒子里面的文本内容不受影响 3.后面必须是 4 个值 */
div {
width: 300px;
height: 300px;
/* background-color: black; */
/* 0.3 也可以写成 .3 */
background-color: rgba(245, 5, 5, .3);
}
</style>
</head>
<body>
<!-- <div></div> <br /> <div></div> <br /> <h3>成长守护平台</h3> <div></div> -->
<!-- 测试背景固定 -->
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<p>天王盖地虎，宝塔镇河妖</p>
<!-- 测试背景透明化 -->
<div>看看文字是否会被透明化</div>
</body>
</html>