跳至主要內容

4.背景及权重

Pupper大约 9 分钟学习笔记前端基础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）

语法格式：

background-color: 颜色;

提示

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

2. 背景图片 （background-image）

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

语法格式：

background-image: none | url(url)+
参数作用
none无背景图片（默认）
url图片的绝对路径或相对路径
详情
<!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 : 用于对背景图片的平铺进行设置

语法格式：

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

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

注意

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

详情
<!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：用于设置背景图片的位置 语法格式：

background-position: x y;

参数：

类型参数
精确方位具体的 x 坐标和 y 坐标
方位名词上（top）、中（center）、下（bottom）、左（left）、中（center）、右（right）

注意

  1. 如果使用方位名词，则参数的没有顺序；
  2. 如果使用精确单位时，第一个参数必须是 x 坐标，第二个参数是 y 坐标；
  3. 如果只写一个参数，那么第二个参数默认为居中 对齐
  4. 如果使用混合单位，那么第一个参数必须是 x 坐标，第二个参数是 y 坐标；
详情
<!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>
案例一
详情
<!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： 设置背景是否固定或者随页面的其余部分滚动

语法格式：

/* 滚动、固定 */

background-attachment: scroll | fixed;

参数：

参数作用
scroll背景图像随对象内容滚动
fixed背景图像固定
详情
<!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. 背景属性混合写法

语法格式：

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

提示

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

示例：

/* 普通写法 */

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. 背景透明色

语法格式：

background: rgba(0, 0, 0, 0.3);

提示

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

案例二

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

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

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

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

行高的继承

body {
	font: 12px/1.5 "microsoft yahei";
}

注意

  1. 行高可以跟单位，也可以不跟单位
  2. 父元素的行高有单位时，如果子元素没有设置行高，则会继承父元素的行高；
  3. 如果父元素的行高没有单位时，子元素的行高 = 当前文字大小 * 父元素的行高
详情
<!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 重要∞ 无穷大
详情
<!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>

复合选择器的权重问题

注意

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

<!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>
默认页脚
Copyright © 2024 Pupper