【Java Web学习 | 第四篇】CSS(3) -背景
🌈个人主页: Hygge_Code🔥热门专栏:从0开始学习Java | Linux学习| 计算机网络💫个人格言: “既然选择了远方，便不顾风雨兼程”
文章目录
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，其他同理）
- 特点：仅使背景色半透明，内容不受影响
综合代码演示
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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>显示效果：
学习资源推荐🐦🔥
- MDN Web Docs - 最权威的CSS参考文档
- W3Schools - 包含丰富的示例和在线编辑器
- 菜鸟编程 - 讲解详细的宝藏网站
如果我的内容对你有帮助，请 点赞 ， 评论 ， 收藏 。创作不易，大家的支持就是我坚持下去的动力！
