Geeks_Z の Blog
Geeks_Z
2022-10-26
目录

CSS 背景（background）

CSS 背景

背景颜色（background-color）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-属性选择器2</title>
    <style>
        div {
            background-color: #51b7eb;
        }
    </style>
</head>
<body bgcolor="#C5ECFF">

<div>这是div</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

显示效果:

背景图片（background-image）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-背景图片</title>
    <style>
        div {
            height: 160px;
            width: 300px;
            background-image: url("../../assets/image/small_logo.png");
        }
    </style>
</head>
<body bgcolor="#C5ECFF">
<div>这是div</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

显示效果:

CSS背景图片与CSS文件的位置:

背景图片的平铺（background-repeat）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-背景图片</title>
    <style>
        div {
            height: 160px;
            width: 300px;
            background-repeat: no-repeat;
            background-color: pink;
            background-image: url("../../assets/image/small_logo.png");
        }
    </style>
</head>
<body bgcolor="#C5ECFF">

<div>背景图片不平铺： background-repeat: no-repeat;</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

背景位置（background-position）

语法格式:

  • background-position: length length;
  • background-position: position position;

参数:

  • length : 百分数 | 由浮点数数字和单位标识符组成的长度值
  • position : top | center | bottom | left | right

说明:

  • 设置或检索对象的背景图像位置时，必须先指定 background-image 属性，默认值为 : (0% 0%)
  • 如果只指定了一个值，该值将用于横向坐标；纵向坐标默认 50% ，第二个值是用来设置纵向坐标的
  • 当使用精确值 px 或其他单位时可以使用 -15px 之类的负数。

注意:

  • position 后面是 X 坐标和 Y 坐标，可以使用方位名词或者精确单位。
  • 如果 position 后面都是方位名词，二者不区分顺序，即 top center 等价于 center top
  • 如果精确单位和方位名词混合使用，则必须是 X 坐标在前，Y 坐标在后。比如：background-position : 15px top, 则 15px 是控制 X 坐标，top 控制 Y 坐标。 而 background-position: center 15px; 则表示 X 坐标居中，Y 坐标距顶部 15px.

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-背景位置</title>
    <style>
        div {
            height: 200px;
            width: 180px;
            background-image: url("../../assets/image/small_logo.png");
            background-repeat: no-repeat;
            background-color: pink;
            /* background-position: center top; 等价于 background-position: top center;*/
            background-position: top center;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<div>背景图片居于 top center</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

显示效果如下:

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-背景位置</title>
    <style>
        div {
            height: 200px;
            width: 180px;
            background-image: url("../../assets/image/small_logo.png");
            background-repeat: no-repeat;
            background-color: pink;
            /* 方位只写一个时，控制 X 坐标，Y 坐标默认居 50%*/
            background-position:  right;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<div>背景图片居于  right</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

示例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-背景位置</title>
    <style>
        div {
            height: 200px;
            width: 180px;
            background-image: url("../../assets/image/small_logo.png");
            background-repeat: no-repeat;
            background-color: pink;
            background-position: 10% 20%;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<div>背景图片居于 10% 20%</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

显示效果:

示例4:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-背景位置</title>
    <style>
        div {
            height: 200px;
            width: 180px;
            background-image: url("../../assets/image/small_logo.png");
            background-repeat: no-repeat;
            background-color: pink;
            background-position: 20px 40px;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<div>背景图片居于 20px 40px</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

显示效果：

示例5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-背景位置</title>
    <style>
        div {
            height: 200px;
            width: 180px;
            background-image: url("../../assets/image/small_logo.png");
            background-repeat: no-repeat;
            background-color: pink;
            background-position: 20px 20%;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<div>背景图片居于 20px 20%</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

显示效果:

示例6:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-背景位置</title>
    <style>
        div {
            height: 200px;
            width: 180px;
            background-image: url("../../assets/image/small_logo.png");
            background-repeat: no-repeat;
            background-color: pink;
            background-position: 15px center;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<div>背景图片居于 left 20%</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

背景附着（background-attachment）

  • 用来设置背景图片是随着界面元素内容滚动还是固定。取值有：scroll 、fixed.
  • background-attachment 默认值 scroll, 即 背景会滚动; fixed 表示背景固定不动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22-CSS 背景案例</title>
    <style>
        div {
            height: 200px;
            width: 260px;
            background-image: url("../../assets/image/imgButton.png");
            background-repeat: no-repeat;
            background-color: pink;
            background-position: left -25px;
            background-attachment: scroll;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<div>
    background-position: left -25px;
    <br>
    background-attachment: scroll;

    <br>
    <br>
    background-position: left -25px;
    <br>
    background-attachment: scroll;

    <br>
    <br>
    background-position: left -25px;
    <br>
    background-attachment: scroll;

    <br>
    <br>
    background-position: left -25px;
    <br>
    background-attachment: scroll;

    <br>
    这是最后一句了，后面没有了
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

背景简写（background）

background 属性可以组合 背景颜色、背景图地址、背景平铺模式、背景附着模式、背景位置。官方对于这些组合的书写顺序没做要求。但建议按如下格式书写：

background : transparent url(image.png) repeat-y scroll 50% 0

即：background : 背景颜色 背景图片 背景平铺 背景滚动 背景位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>22-CSS 背景案例</title>
    <style>
        div {
            height: 200px;
            width: 260px;
            /*background-image: url("../../assets/image/imgButton.png");*/
            /*background-repeat: no-repeat;*/
            /*background-color: pink;*/
            /*background-position: left -25px;*/
            /*background-attachment: scroll;*/
            /*上面的内容可以简写为下面的一句代码*/
            background: pink url("../../assets/image/small_logo.png") no-repeat scroll 50% bottom;
        }

    </style>
</head>
<body bgcolor="#C5ECFF">

<div>
    background-position: left -25px;
    <br>
    background-attachment: scroll;

    <br>
    <br>
    background-position: left -25px;
    <br>
    background-attachment: scroll;

    <br>
    <br>
    background-position: left -25px;
    <br>
    background-attachment: scroll;

    <br>
    <br>
    background-position: left -25px;
    <br>
    background-attachment: scroll;

    <br>
    这是最后一句了，后面没有了
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

背景透明（CSS3）

CSS3 支持背景半透明的写法，语法格式为：background : rgba (0 , 0 , 0 , 0.3);

r、g、b 的取值范围是 0~255，a 取值范围 0~1 之间。背景半透明是指 盒子 背景半透明，内容不受影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-CSS 背景半透明</title>
    <style>
        body {
            background: #C5ECFF url("../../assets/image/small_logo.png") no-repeat top;
        }

        div {
            height: 80px;
            background: rgba(0, 0, 0, 0.5);
        }

    </style>
</head>
<body>
<div>
    背景半透明

    div {
        height: 80px;
        background: rgba(0, 0, 0, 0.5);
    }

</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

显示效果如下：

背景缩放（background-size）-CSS3

通过 background-size 设置背景图片的尺寸，如同设置 img 的尺寸一样，在移动 Web 开发中做屏幕适配应用非常广泛。其参数设置如下：

  • 可以设置长度单位（px）或百分比（设置百分比时参照盒子的宽高）, 只写一个值时为等比例缩放，写两个值则按照设置值缩放。
  • 设置为 cover 时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
  • 设置为 contain 时会自动调整缩放比例，保证图片始终完整显示在背景区域。

背景未缩放的示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-CSS 背景缩放</title>
    <style>
        body {
            background-color: #C5ECFF
        }

        div {
            width: 260px;
            height: 160px;
            background: pink url("../../assets/image/small_logo.png") no-repeat top left;
            /*background-size: contain;*/
        }
    </style>
</head>
<body>
<div>
    背景未做缩放
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

背景未做缩放时的效果：

按照指定的值缩放背景

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>26-CSS 背景缩放</title>
   <style>
       body {
           background-color: #C5ECFF
       }

       div {
           width: 260px;
           height: 160px;
           background: pink url("../../assets/image/small_logo.png") no-repeat top left;
           /* 设置背景图片的具体大小 */
           background-size: 180px 200px;
       }
   </style>
</head>
<body>
<div>
   背景未做缩放
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

显示效果：

背景等比例缩放

/* 只设置一个值时 等比例缩放*/
background-size: 140px ;
1
2

使用百分比实现背景等比例缩放

/* 只设置一个值时 等比例缩放*/
background-size: 50%;
1
2

保证盒子全都被背景图填充--cover

    background-size: cover;
1

保证背景图片能显示完整--contain

    background-size: contain;
1

多背景（CSS3）

以逗号分隔可以设置多背景，多用于自适应布局。

  • 一个元素可以设置多重背景图像
  • 每组属性之间使用逗号分隔。
  • 如果设置的多重背景图之间存在交集，先添加的会覆盖后添加的（即 先添加的显示权重高）
  • 为了避免背景色将图像盖住，背景色通常定义在最后一组。

核心代码为：

 background: url("../../assets/image/small_logo.png") no-repeat top left,
            pink url("../../assets/image/imgButton.png") no-repeat top left;
1
2

完整示例如下 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-CSS 背景缩放</title>
    <style>
        body {
            background-color: #C5ECFF
        }

        div {
            height: 300px;
            background: url("../../assets/image/small_logo.png") no-repeat top left,
            pink url("../../assets/image/imgButton.png") no-repeat top left;
        }
    </style>
</head>
<body>
<div>
    background-size: contain;
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

凹凸文字

同设置多重背景一样，也可以为文本设置多重阴影 text-shadow，从而实现凹凸文字效果。 多个阴影效果之间也是使用 逗号 分割。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v28-CSS多背景图.html</title>
    <style>
        body {
            background-color: #cccc
        }

        div{
            /* 700 表示加粗程度*/
            font: 700 50px "Microsoft YaHei";
            color: #ccc;
        }

        /*伪类选择器*/
        div:first-child{
            /* 水平位置 垂直位置 模糊距离 阴影颜色*/
            text-shadow: 2px 2px 1px #000 ,  -1px -1px 1px #fff ;
        }

        /*伪类选择器*/
        div:last-child{
            /* 水平位置 垂直位置 模糊距离 阴影颜色*/
            text-shadow:  -2px -2px 1px #000 ,1px 1px 1px #fff ;
        }

    </style>
</head>
<body>
<div>
    凸起的文字
</div>
<div>
    凹下去的文字
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

示例-王者荣耀导航栏

  • 当盒子只有一行文本并且 line-height 和 height 一致时，可以实现文本的垂直居中。
  • text-decoration 用于给链接修改装饰效果，取值如下：
取值 含义
none 去除下划线
underline 添加下划线
overline 添加上划线
line-through 添加删除线（横向穿过文本的线）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v28-CSS多背景图.html</title>
    <style>
        body {
            background-color: #cccc
        }

        a {
            width: 80px;
            height: 35px;
            /* 转为行内块元素之后，宽高才能生效*/
            display: inline-block;
            background: #51b7eb;
            text-align: center;
            /* line-height 与 height 一致时，就可以使文字实现垂直居中*/
            line-height: 35px;
            text-decoration: none;
        }

        a:hover {
            color: red;
            background: url("../../assets/image/small_logo.png") no-repeat;
            background-size: cover;
        }

    </style>
</head>
<body>
<a href="#">专区说明</a>
<a href="#">申请资格</a>
<a href="#">兑换奖励</a>
<a href="#">下载游戏</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

#CSS
上次更新: 2025/02/26, 08:57:57
CSS 复合选择器
CSS 三大特性

← CSS 三大特性→

最近更新
01
RAIL
02-26
02
IOCTF
02-25
03
DGM
02-25
更多文章>
Theme by Vdoing | Copyright © 2022-2025 Geeks_Z | MIT License
京公网安备 11010802040735号 | 京ICP备2022029989号-1