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>