7：CSS设置元素背景

一. 背景颜色

background-color属性可以设置元素的背景颜色，需要指定一个颜色值（RGB，十六进制，颜色单词都可以）将指定的颜色值会作为元素的背景色。如果不设置背景颜色，元素默认背景颜色为透明。

二. 背景图片

background-image可以设置元素的背景图片，需要使用url地址作为参数，url地址可以指向图片的路径或链接。例如

background-image: url(https://zhangjia.io/wp-content/themes/LightSNS_1.5_beta_200.3/images/avatar/6.png);

三. 背景重复

background-repeat属性可以控制背景图片的重复方式。可选值：

repeat:默认值，图片在水平垂直方向平铺
no-repeat:只显示一次，不会平铺
repeat-x:水平方向平铺
repeat-y:垂直方向平铺

<!DOCTYPE html>
<html>
	<head>
		<title> 标题 </title>
		<meta charset='UTF-8'/>
		<style type="text/css">
			#zj1{	
				width:1000px;
				margin:5px auto;
				height:150px;
				background-image: url(https://zhangjia.io/wp-content/themes/LightSNS_1.5_beta_200.3/images/avatar/6.png);
				background-repeat:repeat-x;			
			}

		</style>	
	</head>
	<body>

			<div id="zj1"> 
			
			</div>

	</body>
</html>

四. 背景位置

background-position属性可以控制背景图片在元素中的位置，可以通过三种方式来确定图片在水平方向和垂直方向的起点：

top、right、bottom、left、center，如果您仅规定了一个关键词，那么第二个值将是”center”。默认值：0% 0%。

background-position:top 【2】
background-position:right 【6】
background-position:bottom 【8】
background-position:left 【4】
background-position:center 【5】
background-position:left top 【1】
background-position:left bottom【7】
background-position:right top 【3】
background-position:right bottom【9】

百分比，第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%，利用百分比可以精确定位

数值，第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。

<!DOCTYPE html>
<html>
	<head>
		<title> 标题 </title>
		<meta charset='UTF-8'/>
		<style type="text/css">
			#zj1{	
				border:1px solid black;
				width:80px;
				height:80px;
				background-image: url(img/2.png);
				background-repeat:no-repeat;
				background-position:right top;
			}

			

		</style>	
	</head>
	<body>
			<div id="zj1">

			</div>
	</body>
</html>