梦入琼楼寒有月，行过石树冻无烟

CSS 背景

2022-04-21
1
2
3
4
5
6
7
8
<style>
body {
    background-color: #FF0000; 
}
</style>
<body>
<h4>红色</h4>
</body>

在计算机视觉之中，颜色值通常分为三种，主要分别为十六进制、RGB、颜色名称 三大类，在本文主要使用的是十六进制模式。

1
2
3
4
5
6
7
8
<style>
body {
    background-image: url('http://zsdk.org.cn/img/Home_ZhongShan/Background_Safety.png');
}
</style>
<body>
<h4>背景</h4>
</body>

水平平铺

1
2
3
4
5
6
7
8
<style>
	body {
		background-image: url('http://cdn.hktd32t.10.10.8.132.scdn.td98.com/jiangxue.org.cn/picture/ui.png');
	}
</style>
<body>
	<h4>背景</h4>
</body>
1.3 位置与大小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
	body {
		background-image: url('http://cdn.hktd32t.10.10.8.132.scdn.td98.com/jiangxue.org.cn/picture/ui.png');
		/*背景不重复*/
		background-repeat: no-repeat;
		
		/*背景位置*/
		background-position: left top;
		
		/* 文字（覆盖）大小/ */
		margin-right: 330px;
	}
</style>
<body>
	<br>
	<h4>背景</h4>
	<p>通过no-repeat;来设置背景不重复</p>
	<p>之后使用position: right top;来设置图片的位置</p>
	<p>之后使用right来设置文字的覆盖大小</p>
</body>

1.3.1 简写

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
body {
	background: url('http://cdn.hktd32t.10.10.8.132.scdn.td98.com/jiangxue.org.cn/picture/ui.png') no-repeat right top;
	margin-right: 100px;
	}
</style>
<body>
	<b>退出</b>
	<p>拼音：tuì chū</p>
	<p>释义：指在某活动中 离开；或者在 上网时离开 登陆。</p>
	<p>英文： quit</p>
	<p>反义词：进入。</p>
</body>
ID DE FA
color 背景颜色 background
image 背景图像
repeat 水平平铺
repeat 背景不重复
position 背景位置( center = 居中, right = 居右, left = 居左,top = 头部 ，bottom = 底部)
right 文字规定大小范围 margin
⬅️ Go back