CSS基础（四）---背景样式

一、背景颜色和属性

背景颜色和属性包含以下内容：

1、background-color：背景颜色，可以针对布局标签以及整个body进行颜色控制，改变背景颜色，而css中的color则是控制文字的颜色

2、background-image：背景图片，参数为url（），在括号中指定image所在的路径，在图片大小比区块大小小时，image会自动填充

注意：background-image与img的区别：
1、background-image可以设置背景图片，可以在背景图片的基础上进行操作，例如添加文字等
2、img不能在图片上面进行任何操作

以下是实例：

<!DOCTYPE html>
<html>
<head>
	<title>背景颜色与背景图片</title>
	<style type="text/css">
		/*background-color:控制背景颜色，可以控制布局标签也可以控制body*/
		/*改变body背景颜色*/
		body{background-color: #FCFCFC}
		/*改变布局标签背景颜色*/
		.box{background-color: #ccc; width: 200px; height: 100px;}
		/*背景颜色与文字颜色同时控制*/
		.box1{background-color: #ccc; width: 300px; height: 200px; color:red;}
		/*background-image:设置背景图像,参数为url，在括号中输入图片路径*/
		.img{background-image: url(images/bkg.jpg); width: 350px; height: 200px; color:white;}
	</style>
</head>
<body>
	<div class="box">这是一个区块</div>
	<div class="box1">背景颜色与文字颜色同时控制</div>
	<div class="img">这是背景图像</div>
</body>
</html>

二、背景图片重复与偏移

在使用background-image时，背景图片会重复填充

1、background-repeat：背景重复

-repeat：背景图像在纵向和横向上平铺（填充）-默认
-no-repeat：背景图像不平铺
-repeat-x：背景图像在横向上（水平方向）平铺
-repeat-y：背景图像在纵向上（垂直方向）平铺

以下是实例：

<!DOCTYPE html>
<html>
<head>
	<title>背景重复</title>
	<style type="text/css">
		/*background-repeat:背景重复*/
		/*-repeat:默认值，图像水平垂直方向上进行平铺*/
		.bkg{width: 500px;height: 400px;background-image: url(images/bkg.jpg); background-repeat: repeat;}
		/*-no-repeat：不平铺*/
		.bkg1{width: 500px;height: 400px;background-image: url(images/bkg.jpg); background-repeat: no-repeat;}
		/*repeat-x：水平方向平铺*/
		.bkg2{width: 500px;height: 400px;background-image: url(images/bkg.jpg); background-repeat: repeat-x;}
		/*repeat-y：垂直方向平铺*/
		.bkg3{width: 500px;height: 400px;background-image: url(images/bkg.jpg); background-repeat: repeat-y;}
		/*背景img与背景颜色同时使用,但是为repeat时看不到背景颜色*/
		.bkg3{width: 500px;
			height: 400px;
			background-image: url(images/bkg.jpg); 
			background-repeat: no-repeat;
			background-color: #ccc}
	</style>
</head>
<body>
	<div class="bkg">腾讯视频</div>
	<hr>
	<div class="bkg1">腾讯视频</div>
	<hr>
	<div class="bkg2">腾讯视频</div>
	<hr>
	<div class="bkg3">腾讯视频</div>
	<hr>
	<div class="bkg4">百度一下</div>
</body>
</html>

2、background-position：背景定位

background-position：x y，x表示x轴（水平轴）上的偏移，y表示y轴（垂直轴）上的偏移
2.1、x轴可以使用left、center、right或精确数值
2.2、y轴可以使用top、center、bottom或精确数值
2.3、x轴可以给精确数值，数值为正则向右偏移，数值为负向左偏移
2.4、y轴可以给精确数值，数值为正则向下偏移，数值为负向上偏移

<!DOCTYPE html>
<html>
<head>
	<title>背景图片偏移</title>
	<style type="text/css">
		/*background-position:背景图片偏移*/
		/*向右下方偏移*/
		.box{width: 300px; 
			height: 300px; 
			background-color: #ccc;
			background-repeat: no-repeat;
			background-image: url(images/bkg2.jpg);
			background-position: right bottom;}
		/*向中下方偏移*/
		.box2{width: 300px; 
			height: 300px; 
			background-color: #ccc;
			background-repeat: no-repeat;
			background-image: url(images/bkg2.jpg);
			background-position: center bottom;}
		/*正中偏移*/
		.box3{width: 300px; 
			height: 300px; 
			background-color: #ccc;
			background-repeat: no-repeat;
			background-image: url(images/bkg2.jpg);
			background-position: center center;}
		/*数值偏移*/
		.box4{width: 300px; 
			height: 300px; 
			background-color: #ccc;
			background-repeat: no-repeat;
			background-image: url(images/bkg2.jpg);
			background-position: 20px 50px;}
		/*负数值偏移*/
		.box5{width: 300px; 
			height: 300px; 
			background-color: #ccc;
			background-repeat: no-repeat;
			background-image: url(images/bkg2.jpg);
			background-position: -20px -50px;}
	</style>
</head>
<body>
	<div class="box">百度一下</div>
	<hr>
	<div class="box2">腾讯视频</div>
	<hr>
	<div class="box3">京东商城</div>
	<hr>
	<div class="box4">百度地图</div>
	<hr>
	<div class="box5">wolala</div>
</body>
</html>

三、设置背景图像的固定

1、background-attachment：背景固定

-scroll 默认值，背景图像会随着页面其余部分的滚动而移动
-fixed 当页面的其余部分滚动时，背景图像不会移动

注意：background-attachment不仅对body背景可以固定，同时也可以对标签进行固定

以下是实例：（显示自己可以看效果）

<!DOCTYPE html>
<html>
<head>
	<title>背景固定</title>
	<style type="text/css">
		/*background-attachment背景固定*/
		/*-scroll	默认值，背景图像会随着页面其余部分的滚动而移动
		-fixed	    当页面的其余部分滚动时，背景图像不会移动*/
		/*设置背景为居中顶对齐并去掉重复，背景固定*/
		body{background-image: url(images/body_bkg.jpg);
			 background-position: center top;
			 background-repeat: no-repeat;
			 background-attachment: fixed;}
	</style>
</head>
<body>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>背景固定2</title>
	<style type="text/css">
		/*针对其他元素的背景图片也可以使用背景固定*/
		.box1{height: 1000px;
			  background-color: #ccc;}
		.box2{height:800px;
			  background-image: url(images/body_bkg.jpg);
			  background-position: center top;
			  background-repeat: no-repeat;
			  background-attachment: fixed;}
		.box3{height: 500px;
			  background-color: #ccc;}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

四、背景代码简写

1、背景代码简写规则

背景代码的简写规则：background：颜色路径重复偏移固定，分别对应了color、url（）、repeat、position以及attachment，位置可以互换，中间以空格分隔

2、background简写

2.1、单个background属性控制，则可以写成background：单个属性;（color、url（）、repeat、center center、fixed）
2.2、多个background属性控制，则可以写成background：#ccc url（images/aaa.jpg） no-repeat right center fixed，中间需要空格隔开;
2.3、background属性可以互换位置，不影响显示效果，偏移的两个值是必须在一起的，不可分开

以下是实例：

<!DOCTYPE html>
<html>
<head>
	<title>背景简写</title>
	<style type="text/css">
		/*background:单个属性设定简写*/
		.box1{width: 500px; 
			height:500px;
			background: #ccc;}
		/*background:多个属性设定简写*/
		.box2{width: 500px;
			height: 500px;
			background: #ccc url(images/bkg2.jpg) no-repeat center center;}
		/*background在设定鼠标移入时的效果，如果不是所有属性修改，而是针对某一个属性进行修改，则需要写明background属性参数*/
		.box2:hover{background-color: blue;}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>