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

🌈 个人主页: Hygge_Code
🔥 热门专栏:从0开始学习Java | Linux学习| 计算机网络
💫 个人格言: "既然选择了远方，便不顾风雨兼程"

文章目录

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

CSS背景样式全解析🥝

在网页设计中，背景样式是塑造页面视觉效果的关键元素之一。通过CSS的背景属性，我们可以为页面添加丰富的视觉效果，包括背景颜色、背景图片、平铺方式、定位以及固定等。

4.1 背景颜色 (`background-color`)

背景颜色是最基础的背景属性，用于设置元素的背景色。

css 复制代码

div {
  width: 200px;
  height: 200px;
  /* 默认值为transparent（透明） */
  /* background-color: transparent; */
  background-color: pink;
}

默认值：transparent（透明）
可接受的值：颜色名称、十六进制值、RGB值、RGBA值
应用场景：为元素提供基础底色，或作为背景图片的补充

4.2 背景图片 (`background-image`)

使用背景图片可以为元素添加更丰富的视觉效果。

css 复制代码

#image-test {
  width: 200px;
  height: 340px;
  background-image: url(picture/Q.png);
}

语法：background-image: none | url(图片地址)
默认值：none（无背景图）
实际应用：常用于logo、装饰性小图片或超大背景图，便于精确控制位置

4.3 背景平铺 (`background-repeat`)

控制背景图片是否以及如何在元素中平铺。

css 复制代码

#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`)

精确控制背景图片在元素中的位置。

css 复制代码

#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坐标

示例应用：为文字添加小图标

css 复制代码

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`)

控制背景图片是否随页面滚动而移动，常用于制作视差滚动效果。

css 复制代码

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允许将多个背景属性合并为一个简写属性。

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颜色值可以实现背景色的半透明效果，而不影响元素内的文本内容。

css 复制代码

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，其他同理）
特点：仅使背景色半透明，内容不受影响

综合代码演示

html 复制代码

<!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 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>

显示效果：

学习资源推荐🐦‍🔥

MDN Web Docs - 最权威的CSS参考文档
W3Schools - 包含丰富的示例和在线编辑器
菜鸟编程 - 讲解详细的宝藏网站

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！

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

文章目录

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)

综合代码演示

学习资源推荐🐦‍🔥

4.1 背景颜色 (`background-color`)

4.2 背景图片 (`background-image`)

4.3 背景平铺 (`background-repeat`)

4.4 背景图片位置 (`background-position`)

4.5 背景图像固定 (`background-attachment`)

4.7 背景色半透明 (`rgba`)