当前位置：首页 > news >正文

【Java Web学习 | 第四篇】CSS(3) -背景

news 2025/11/2 7:10:09

🌈 个人主页: Hygge_Code

🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络

💫 个人格言: “既然选择了远方，便不顾风雨兼程”

在这里插入图片描述

文章目录

- CSS背景样式全解析🥝
- - 4.1 背景颜色 (`background-color`)
  - 4.2 背景图片 (`background-image`)
  - 4.3 背景平铺 (`background-repeat`)
  - 4.4 背景图片位置 (`background-position`)
  - 4.5 背景图像固定 (`background-attachment`)
  - 4.6 背景属性复合写法
  - 4.7 背景色半透明 (`rgba`)
  - - 综合代码演示
  - 学习资源推荐🐦‍🔥

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-y1. 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,第二个单位一定是ybackground-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 id="image-test"></div><br /><h3>成长守护平台</h3><div id="image-test2"></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>