CSS 背景及权重

一、 背景

属性作用值
background-color背景颜色预定义颜色值、十六进制、RGB代码
background-image背景图片url(图片路径)
background-repeat是否平铺repeat、no-repeat、repeat-x、repeat-y
background-position背景位置x、y 坐标
background-attachment背景附着scroll（滚动）、fixed（固定）
背景属性简写颜色 url(图片路径) 平铺 固定 位置
背景透明度背景颜色透明background: rgba(0,0,0,.3)

1. 背景颜色（background-color）

语法格式：

1
background-color: 颜色;

一般情况下，元素背景默认颜色为 <mark> transparent（透明） </mark>，也可以手动设置为透明

2. 背景图片 （background-image）

background-image 常用于 logo 或者 超大的背景,优点是便于控制

语法格式：

1
background-image: none | url(url)+
参数作用
none无背景图片（默认）
url图片的绝对路径或相对路径
代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #bgi {
            height: 300px;
            width: 300px;
            background-image: url(https://img.pupper.cn/img/20211115102435-2021-11-15.png);
        }
    </style>
</head>
<body>
    <div id="bgi">
    
    </div>
  
</body>
</html>

3. 背景平铺（background-repeat）

background-repeat : 用于对背景图片的平铺进行设置

语法格式：

1
2
3
<!-- 平铺（默认）、不平铺、横向平铺、纵向平铺 -->

background-repeat: repeat | no-repeat | repeat-x | repeat-y

可以同时设置背景图片和背景颜色，但是背景图片会在背景颜色的上方。

代码示例
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
52
53
54
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #bgi-1,
        #bgi-2,
        #bgi-3,
        #bgi-4 {
            /* display: inline; */
            height: 300px;
            width: 300px;
            background-image: url(https://img.pupper.cn/img/20211115102435-2021-11-15.png);

        }

        #bgi-1 {
            background-repeat: repeat;
        }

        #bgi-2 {
            background-repeat: no-repeat;
        }

        #bgi-3 {
            background-repeat: repeat-x;
        }

        #bgi-4 {
            background-repeat: repeat-y;
        }
    </style>
</head>

<body>
    <div id="bgi-1">
        平铺
    </div>
    <div id="bgi-2">
        不平铺
    </div>
    <div id="bgi-3">
        横向平铺
    </div>
    <div id="bgi-4">
        竖向平铺
    </div>
</body>

</html>

4. 背景位置（background-position）

background-position：用于设置背景图片的位置
语法格式：

1
background-position: x y;

参数：

类型参数
精确方位具体的x坐标和y坐标
方位名词上（top）、中（center）、下（bottom）、左（left）、中（center）、右（right）
  1. 如果使用方位名词，则参数的没有顺序；
  2. 如果使用精确单位时，第一个参数必须是x坐标，第二个参数是y坐标；
  3. 如果只写一个参数，那么第二个参数默认为居中 对齐
  4. 如果使用混合单位，那么第一个参数必须是x坐标，第二个参数是y坐标；
代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #bgi-1 {
            height: 300px;
            width: 300px;
            background-image: url(https://img.pupper.cn/img/20211115102435-2021-11-15.png);

        }

        #bgi-1 {
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>

<body>
    <div id="bgi-1">
        居中
    </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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            display: inline-block;
            font-weight: normal;
            font-size: 14px;
            background-image: url(https://img.pupper.cn/img/20211115114447-2021-11-15.png);
            height: 41px;
            width: 120px;
            background-repeat: no-repeat;
            background-position: left center;
            background-color: rgb(209, 233, 211);
            line-height: 41px;
            text-indent: 1.5em;
        }

        body {
            background-image: url(https://img.pupper.cn/img/71658346059604-2021-11-15.jpg);
            background-position: center top;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <h3>成长守护平台</h3>
</body>

</html>

5. 背景固定或附着（background-attachment）

background-attachment： 设置背景是否固定或者随页面的其余部分滚动

语法格式：

1
2
3
/* 滚动、固定 */

background-attachment: scroll | fixed

参数：

参数作用
scroll背景图像随对象内容滚动
fixed背景图像固定
代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            font-weight: normal;
            font-size: 14px;
            background-image: url(https://img.pupper.cn/img/20211115114447-2021-11-15.png);
            height: 100px;
            width: 120px;
            background-repeat: no-repeat;
            background-position: left center;
            background-color: rgb(209, 233, 211);
            line-height: 100px;
            text-indent: 1.5em;
        }

        body {
            background-attachment: fixed;

            background-image: url(https://img.pupper.cn/img/71658346059604-2021-11-15.jpg);
            background-position: center top;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
    <h3>背景图片固定</h3>
</body>

</html>

6. 背景属性混合写法

语法格式：

1
background: 背景颜色 图片地址 背景平铺 背景滚动 背景位置;

混合写法时，没有固定的书写顺序，一般约定顺序为格式中的顺序。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 普通写法 */

body {
            background-attachment: fixed;

            background-image: url(https://img.pupper.cn/img/71658346059604-2021-11-15.jpg);
            background-position: center top;
            background-repeat: no-repeat;
        }

/* 混合写法 */

body {
            background: url(https://img.pupper.cn/img/71658346059604-2021-11-15.jpg) no-repeat fixed top center;
        }

7. 背景透明色

语法格式：

1
background: rgba(0,0,0,0.3);
  1. 最后一个参数是 alpha 透明度，取值范围为0~1之间，取值越小，透明度越高。
  2. 我们习惯把 0.3 的 0 省略，background: rgba(0, 0, 0, .3);
代码示例
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            font-weight: normal;
            font-size: 14px;
            background-image: url(https://img.pupper.cn/img/20211115114447-2021-11-15.png);
            height: 100px;
            width: 120px;
            background-repeat: no-repeat;
            background-position: left center;
            background-color: rgba(209, 233, 211, .5);
            line-height: 100px;
            text-indent: 1.5em;
        }

        body {
            background: url(https://img.pupper.cn/img/71658346059604-2021-11-15.jpg) no-repeat fixed top center;
        }
    </style>
</head>

<body>
    <h3>背景图片半透明</h3>

</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
52
53
54
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            display: inline-block;
            width: 120px;
            height: 58px;
            text-decoration: none;
            color: #fff;
            text-align: center;
            line-height: 48px;            
        }

        .bg2{
            background: url(https://img.pupper.cn/img/2-2021-11-15.png) no-repeat;
        }

        .bg3{
            background: url(https://img.pupper.cn/img/3-2021-11-15.png) no-repeat;
        }
        
        .bg4{
            background: url(https://img.pupper.cn/img/4-2021-11-15.png) no-repeat;
        }
        
        .bg5{
            background: url(https://img.pupper.cn/img/5-2021-11-15.png) no-repeat;
        }
        
        a:hover{
            background-image: url(https://img.pupper.cn/img/1-2021-11-15.png);
        }
        
        
    </style>
</head>

<body>
    <div>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg3">五彩导航</a>
        <a href="#" class="bg4">五彩导航</a>
        <a href="#" class="bg5">五彩导航</a>
    </div>

</body>

</html>

二、CSS样式三大特性

1. 层叠性

层叠性主要解决的是样式冲突的问题
相同选择器重复设置样式时，会遵循 就近原则 ，即最后设置的样式为最终样式。

代码示例
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>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		a {
			font-size: 20px;
			color: aqua;
		}
		a{
			color: red;
		}
	</style>
</head>

<body>
	<div>
		<a href="#">颜色冲突，根据层叠性显示红色，字体大小不冲突，任然显示20px</a>
	</div>
</body>

</html>

2. 继承性

css中，子标签会继承父标签的某些样式（文字相关的样式，如：颜色，大小等），恰当的使用继承性，可以降低 CSS 样式的复杂性。

代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div {
			font-size: 20px;
			color: red;
		}
	</style>
</head>

<body>
	<div>
		<p>继承性：继承父标签的文字属性</p>
	</div>
</body>

</html>

行高的继承

1
2
3
body {
    font: 12px/1.5 "microsoft yahei";
}
  1. 行高可以跟单位，也可以不跟单位
  2. 父元素的行高有单位时，如果子元素没有设置行高，则会继承父元素的行高；
  3. 如果父元素的行高没有单位时，子元素的行高 = 当前文字大小 * 父元素的行高
代码示例
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>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {
			font: 20px/1.5 "microsoft yahei";
		}
		p{
			font-size: 40px;
		}

	</style>
</head>

<body>
	<div>div没有设置行高，那么他的行高 = 父元素的字体大小 20 * 1.5</div>
	<p>p元素设置了字体大小，那么他的行高 = 字体大小 40 * 1.5</p>

</body>

</html>

3. 优先级

  1. 选择器相同，则执行层叠性
  2. 选择器不同，则执行优先级
  3. 权重在比较时，从左到右 进行比较
  4. 不管父元素的权重多高，子元素继承的权重都为0

选择器权重：
| 选择器 | 选择器权重 |
|———————————|——————|
| 继承 或者 * | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式 style=”” | 1,0,0,0 |
| !important 重要 | ∞无穷大 |

代码示例
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
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {
			color: aqua;
		}
		div{
			color: gold;
		}
		.test{
			color: rebeccapurple!important;
		}
		#demo{
			color: red;
		}

	</style>
</head>

<body>
	<div class="test" id="demo" style="color: blue;">!important > 行内样式 > id选择器 > 类选择器 > 元素选择器 > 继承</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
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		/* 复合选择器会有权重叠加问题 */
		/* ul li 的权重： 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
		ul li {
			color: green;
		}
		/* li 的权重：0,0,0,1 */
		li {
			color: red;
		}
		/* .nav li 的权重：0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
		.nav li {
			color: pink;
		}
	</style>
</head>

<body>
	<ul class="nav">
		<li>权重的叠加,最终显示粉色 pink</li>
		<li>权重的叠加,最终显示粉色 pink</li>
		<li>权重的叠加,最终显示粉色 pink</li>
	</ul>
</body>

</html>