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();
: no-repeat;
: top;
}
{
: ;
: ;
: ;
: ;
: ;
: ;
: ();
: no-repeat;
: left center;
}
{
: ;
: ;
: ();
: no-repeat;
: ;
}
{
: white;
: black;
: black () no-repeat fixed center ;
}
{
: ;
: ;
: (, , , .);
}
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
天王盖地虎，宝塔镇河妖
看看文字是否会被透明化
