CSS 3之背景属性

背景属性

1. 背景图片大小
2. 背景显示区域
3. 背景图像裁剪区域

1. 背景图片大小

使用 background-size 属性，能设置背景图片大小；
语法格式如下所示：

background-size:[<length> | <percentage> | auto] {1,2} | cover | contain
1

20220510
例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设定背景大小</title>
		<style>
			body{
				background-image: url(3.jpg);
				background-repeat: no-repeat;
				background-size:800px 700px;
			}
		</style>
	</head>
	<body>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

20220510
background-size 属性能设置一个或多个值，一个为必填，一个为选填；
第一个值指定图片宽度，第二个值指定图片高度；若只设定一个值，则第二个值默认为auto；

2. 背景显示区域

使用 background-origin 属性，能完成背景图片的定位；
默认情况下，background-position 属性总是以元素左上角原点作为背景图片定位，适应 background-origin 属性能改变这种定位方式；
语法格式如下所示：

 background-origin :border | padding | content
1

20220510
例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景坐标原点</title>
		<style>
			div{
				text-align: center;
				height: 500px;
				width: 416px;
				border: solid 2px blue;
				padding: 32px 2em 0;
				background-image: url(3.jpg);
				background-origin: padding;
			}
			div h1{
				font-size: 23px;
				font-family: "幼圆";
			}
			div p{
				text-indent: 2em;
				line-height: 2em;
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<div>
			<h1>竹源坑</h1>
			<p>	杀虎防咥人，芟蔓莫留根。</p>
			<p> 留根终遗患，伤心不可论。</p>
			<p>竹源数百家，今余几人存。</p>
			<p>竹外有源泉，血流泉水浑。</p>
			<p>群盗故比邻，姻娅如弟昆。</p>	
			<p>反戈相啖食，收骨无儿孙。</p>	
			<p>茕茕数寡妇，零落依空村。</p>	
			<p>凶年嗟半菽，撮土招游魂。</p>	
			<p>人亡亩税在，泪罢还声吞。</p>	
		</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

20220510

3. 背景图像裁剪区域

使用 background-clip 属性，能裁剪背景图片；
语法格式如下所示：

background-clip :border-box | padding-box | content-box | no-clip
1

20220510
例子 3:：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景裁剪</title>
		<style>
			div{
				height: 500px;
				width: 390px;
				background-image: url(3.jpg);
				background-repeat: no-repeat;
				background-clip: content;
			}
		</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

20220510

相关阅读:
dreamweaver网页设计作业制作学生个人网页猫眼电影 WEB静态网页作业模板大学生个人主页博客网页代码 dw个人网页作业成品
Linux服务器部署JavaWeb后端项目
电脑重装系统后DirectX12旗舰版禁用了怎么解决？
火影忍者游戏干货分享：5个提升战斗技巧的实用技巧！
R语言ggplot2可视化：使用patchwork包将2个ggplot2可视化结果横向组合、并自定义修改（更改）组合图像中指定子图的主题（theme）
element-ui全局导入与按需引入
数据结构——图(图的存储及基本操作)
不可避免的过程：初学者写的愚蠢代码及其启示
Vulnhub靶机：HACKER KID_ 1.0.1
Redisson源码解读-公平锁

原文地址：https://blog.csdn.net/weixin_43960383/article/details/125408609