CSS - 背景及权重

Pupper2023-02-202024-04-18

一、背景

属性	作用	值
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: 颜色;

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

2. 背景图片（`background-image`）

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

语法格式：

1	background-image: none \| url(url)+

参数	作用
none	无背景图片（默认）
url	图片的绝对路径或相对路径

::: details

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

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

::: details

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

::: warning

如果使用方位名词，则参数的没有顺序；
如果使用精确单位时，第一个参数必须是x坐标，第二个参数是y坐标；
如果只写一个参数，那么第二个参数默认为居中对齐
如果使用混合单位，那么第一个参数必须是x坐标，第二个参数是y坐标；
:::

::: details

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

:::

案例一

::: details

<!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	背景图像固定

::: details

<!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: 背景颜色图片地址背景平铺背景滚动背景位置;

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

示例：

/* 普通写法 */

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

::: tip

最后一个参数是 alpha 透明度，取值范围为0~1之间，取值越小，透明度越高。
我们习惯把 0.3 的 0 省略，background: rgba(0, 0, 0, .3);
:::

::: details

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

:::

案例二

::: details

<!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. 层叠性

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

::: details

<!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 样式的复杂性。

::: details

<!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";
}

::: warning

行高可以跟单位，也可以不跟单位
父元素的行高有单位时，如果子元素没有设置行高，则会继承父元素的行高；
如果父元素的行高没有单位时，子元素的行高 = 当前文字大小 * 父元素的行高
:::

::: details

<!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. 优先级

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

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

::: details

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

:::

复合选择器的权重问题

::: warning
当使用复合选择器时，他的权重 = 所有标签权重的叠加
权重虽然可以叠加，但是不会进位
:::

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

一、 背景

1. 背景颜色（background-color）

2. 背景图片 （background-image）

3. 背景平铺（background-repeat）

4. 背景位置（background-position）

案例一

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

6. 背景属性混合写法

7. 背景透明色

案例二

二、CSS样式三大特性

1. 层叠性

2. 继承性

行高的继承

3. 优先级

复合选择器的权重问题

一、背景

1. 背景颜色（`background-color`）

2. 背景图片（`background-image`）

3. 背景平铺（`background-repeat`）

4. 背景位置（`background-position`）

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