020_CSS背景

最新推荐文章于 2024-11-29 17:15:13 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-11-29 17:15:13 发布

阅读量269

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109071425

版权

css学习专栏收录该内容

52 篇文章

订阅专栏

1. CSS允许应用纯色作为背景, 也允许使用背景图像创建相当复杂的效果。

2. CSS背景属性

3. 所有背景属性都不能继承。

4. 背景色

4.1. background-color属性设置元素的背景颜色。这个属性接受任何合法的颜色值。

4.2. background-color属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域。如果边框有透明部分(如虚线边框), 会透过这些透明部分显示出背景色。

4.3. 可以为所有元素设置背景色, 这包括body一直到em和a等行内元素。

4.4. 默认值

4.5. 可能的值

4.6. 例子

4.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>背景色</title>
		<meta charset="utf-8" />

		<style type="text/css">
	  		body { 
	  			background-color: yellow; 
	  		}
	  		h1,h2,p {
				width: 200px;
				height: 200px;
				border: dashed 10px;
				margin: 10px;
				padding: 20px;
				float: left;
	  		}
			h1 {
				background-color: #00ff00; 
			}
			h2 {
				background-color: transparent; 
			}
			p {
				background-color: rgb(250,0,255); 
			}
		</style>
	</head>
	<body>
		<h1>这是标题 1</h1>
		<h2>这是标题 2</h2>
		<p>这是段落</p>
	</body>
</html>

4.6.2. 效果图

5. 背景图像

5.1. background-image属性为元素设置背景图像。

5.2. 如果需要设置一个背景图像, 必须为这个属性设置一个url值:

body {
	background-image: url('eg_bg_04.gif');
}

5.3. 元素的背景占据了元素的全部尺寸, 包括内边距和边框, 但不包括外边距。

5.4. 默认地, 背景图像位于元素的左上角, 并在水平和垂直方向上重复。

5.5. 默认值

5.6. 可能的值

6. 背景重复

6.1. background-repeat属性设置是否及如何重复背景图像。

6.2. 默认值

6.3. 可能的值

6.4. 例子

6.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>背景重复</title>
		<meta charset="utf-8" />

		<style type="text/css">
	  		body { 
	  			background-image: url('eg_bg_03.gif');
	  			background-repeat: repeat-y;
	  		}
		</style>
	</head>
	<body>

	</body>
</html>

6.4.2. 效果图

7. 背景定位

7.1. background-position属性设置背景图像的起始位置。

7.2. 默认值

7.3. 可能的值

8. 背景定位-关键字

8.1. 图像放置关键字最容易理解, 其作用如其名称所表明的。例如: top right使图像放置在元素内边距区的右上角。

8.2. 根据规范, 位置关键字可以按任何顺序出现, 只要保证不超过两个关键字, 一个对应水平方向, 另一个对应垂直方向。

8.3. 如果只出现一个关键字, 则认为另一个关键字是center。两个关键字没有顺序。

8.4. 水平方向关键字: left、right和center。

8.5. 竖直方向关键字: top、bottom和center。

8.6. 例子

8.6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>背景定位-关键字</title>
		<meta charset="utf-8" />

		<style type="text/css">
	  		div	{
				width: 150px;
				height: 150px;
				border: solid 1px;
				margin: 10px;
				background-image: url('eg_bg_03.gif');
				background-repeat: no-repeat;
				float: left;
	  		}
	  		#div1 {
	  			background-position: center; 
	  			background-color: red;
	  		}
	  		#div2 {
	  			background-position: center center;	
	  			background-color: red;
	  		}
	  		#div3 {
	  			background-position: center left; 
	  			background-color: yellow;
	  		}
	  		#div4 {
	  			background-position: center right; 
	  			background-color: orange;
	  		}
	  		#div5 {
	  			background-position: center top; 
	  			background-color: gray;
	  		}
	  		#div6 {
	  			background-position: center bottom; 
	  			background-color: blue;
	  		}

	  		#div7 {
	  			background-position: left; 
	  			clear: left; 
	  			background-color: yellow;
	  		}
	  		#div8 {
	  			background-position: left top; 
	  			background-color: green;
	  		}
	  		#div9 {
	  			background-position: left bottom; 
	  			background-color: pink;
	  		}
	  		#div10 {
	  			background-position: left center; 
	  			background-color: yellow;
	  		}

	  		#div11 {
	  			background-position: right; 
	  			clear: left; 
	  			background-color: orange;
	  		}
	  		#div12 {
	  			background-position: right top; 
	  			background-color: lightblue;
	  		}
	  		#div13 {
	  			background-position: right bottom;
	  		}
	  		#div14 {
	  			background-position: right center; 
	  			background-color: orange;
	  		}

	  		#div15 {
	  			background-position: top; 
	  			clear: left; 
	  			background-color: gray;
	  		}
	  		#div16 {
	  			background-position: top left; 
	  			background-color: green;
	  		}
	  		#div17 {
	  			background-position: top right; 
	  			background-color: lightblue;
	  		}
	  		#div18 {
	  			background-position: top center; 
	  			background-color: gray;
	  		}

	  		#div19 {
	  			background-position: bottom; 
	  			clear: left; 
	  			background-color: blue;
	  		}
	  		#div20 {
	  			background-position: bottom left; 
	  			background-color: pink;
	  		}
	  		#div21 {
	  			background-position: bottom right;
	  		}
	  		#div22 {
	  			background-position: bottom center; 
	  			background-color: blue;
	  		}
		</style>
	</head>
	<body>
		<div id="div1">center</div>
		<div id="div2">center center</div>
		<div id="div3">center left</div>
		<div id="div4">center right</div>
		<div id="div5">center top</div>
		<div id="div6">center bottom</div>

		<div id="div7">left</div>
		<div id="div8">left top</div>
		<div id="div9">left bottom</div>
		<div id="div10">left center</div>

		<div id="div11">right</div>
		<div id="div12">right top</div>
		<div id="div13">right bottom</div>
		<div id="div14">right center</div>

		<div id="div15">top</div>
		<div id="div16">top left</div>
		<div id="div17">top right</div>
		<div id="div18">top center</div>

		<div id="div19">bottom</div>
		<div id="div20">bottom left</div>
		<div id="div21">bottom right</div>
		<div id="div22">bottom center</div>
	</body>
</html>

8.6.2. 效果图

9. 背景定位-百分数值

9.1. 百分数值同时应用于元素和图像。也就是说, 图像中描述为50% 50%的点(中心点)与元素中描述为50% 50%的点(中心点)对齐。

9.2. 如果只提供一个百分数值, 所提供的这个值将用作水平值, 垂直值将假设为50%。这一点与关键字类似。

9.3. 例子

9.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>背景定位-百分数值</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div {
				width: 150px;
				height: 150px;
				border: dashed 10px;
				margin: 10px;
				padding: 10px;
				background-image: url('eg_bg_03.gif');
				background-repeat: no-repeat;
				float: left;
	  		}
	  		#div1 {
	  			background-position: 0% 0%;
	  		}
	  		#div2 {
	  			background-position: 0% 50%;
	  		}
	  		#div3 {
	  			background-position: 0% 100%;
	  		}
	  		#div4 {
	  			background-position: 50% 0%;
	  		}
	  		#div5 {
	  			background-position: 50% 50%;
	  		}
	  		#div6 {
	  			background-position: 50% 100%;
	  		}
	  		#div7 {
	  			background-position: 100% 0%;
	  		}
	  		#div8 {
	  			background-position: 100% 50%;
	  		}
	  		#div9 {
	  			background-position: 100% 100%;
	  		}
	  		#div10 {
	  			width: 1300px;
	  			background-position: 10% 0%;
	  		}
		</style>
	</head>
	<body>
		<div id="div1">0% 0%</div>
		<div id="div2">0% 50%</div>
		<div id="div3">0% 100%</div>
		<div id="div4">50% 0%</div>
		<div id="div5">50% 50%</div>
		<div id="div6">50% 100%</div>
		<div id="div7">100% 0%</div>
		<div id="div8">100% 50%</div>
		<div id="div9">100% 100%</div>
		<div id="div10">10% 0%</div>
	</body>
</html>

9.3.2. 效果图

10. 背景定位-长度值

10.1. 长度值是图像的左上角相对于元素内边距区左上角的偏移。

10.2. 比如: 如果设置值为50px 100px, 图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置上:

body { 
    background-image: url('/i/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 50px 100px;
}

10.3. 例子

10.3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>背景定位-长度值</title>
		<meta charset="utf-8" />

		<style type="text/css">
			div	{
				width: 150px;
				height: 150px;
				border: solid 1px;
				margin: 10px;
				background-image: url('eg_bg_03.gif');
				background-repeat: no-repeat;
				float: left;
	  		}
	  		#div1 {
	  			background-position: 0px 0px;
	  		}
	  		#div2 {
	  			background-position: 10px 0px;
	  		}
	  		#div3 {
	  			background-position: 20px 0px;
	  		}
	  		#div4 {
	  			background-position: 0px 10px;
	  		}
	  		#div5 {
	  			background-position: 0px 20px;
	  		}
	  		#div6 {
	  			background-position: 10px 10px;
	  		}
	  		#div7 {
	  			background-position: 10px 20px;
	  		}
	  		#div8 {
	  			background-position: 20px 10px;
	  		}
	  		#div9 {
	  			background-position: 20px 20px;
	  		}
		</style>
	</head>
	<body>
		<div id="div1">0px 0px</div>
		<div id="div2">10px 0px</div>
		<div id="div3">20px 0px</div>
		<div id="div4">0px 10px</div>
		<div id="div5">0px 20px</div>
		<div id="div6">10px 10px</div>
		<div id="div7">10px 20px</div>
		<div id="div8">20px 10px</div>
		<div id="div9">20px 20px</div>
	</body>
</html>

10.3.2. 效果图

11. 背景关联

11.1. background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

11.2. 默认值

11.3. 可能的值

11.4. 例子

11.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>背景关联</title>
		<meta charset="utf-8" />

		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
			}
			div	{
				width: 200px;
				height: 1300px;
				border: solid 1px;
				background-repeat: no-repeat;
				background-attachment: scroll;
				background-image: url('eg_bg_03.gif');
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

11.4.2. 效果图

12. 背景

12.1. background 简写属性在一个声明中设置所有的背景属性。

12.2. 在使用简写属性时, 属性值的顺序为: background-color、background-image、background-repeat、background-attachment、background-position、background-size、background-origin和background-clip。

12.3. 属性值之一缺失并不要紧, 只要按照此顺序设置其他值即可。比如: "background: #ff0000 url('smiley.gif');" 也是允许的。

12.4. 通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

12.5. 默认值

12.6. 可能的值

12.7. 例子

12.7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>背景</title>

		<style type="text/css">
			div	{
				width: 500px;
				height: 1500px;
				border: solid 1px;
				background: #FF0000 url('eg_bg_03.gif') no-repeat scroll top center / 260px 260px padding-box border-box;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

12.7.2. 效果图