css背景

背景颜色

background-color：

背景图片：

background-image：url();

背景图片平铺：

background-repeat:repeat-x;

#d1{
width:800px;
height:800px;
background-color:#aff;
border:5px solid #f00;
background-image:url("…/img/tu.jpg");
background-repeat:repeat-x;
}

图片排布

改变背景图片的尺寸

background-size

背景图固定

background-attachment:fixed;

#d3{
		width:300px;
		height:300px;
		overflow:auto;
		border:5px solid #f00;
		background-image:url("../img/111.png");
		background-repeat:no-repeat;
		background-attachment:fixed;
	}

背景的简写方式

在一个属性中，指定背景的多个属性值
background
取值
color url repeat attachment position

#d4{
		width:500px;
		height:500px;
		border:5px solid #f00;
		background:#aff url("../img/111.png") no-repeat fixed center center;
	}

线性渐变

background-image:linear-gradient(较多，取色)

径向渐变

#d1{
		width:200px;
		height:200px;
		border:5px solid #f00;
		background-image:radial-gradient(100px at center center,#f00 10%,#ffa 50%,#00f);
	}

		#d3{
			width:200px;
			height:200px;
			border:2px solid #f00;
			background-image:repeating-radial-gradient(
			200px at center center,#d8bbe7 20%,#0b090a 40%
			);
			border-top-left-radius:62%;
			border-top-right-radius:1%;
			border-bottom-left-radius:1%;
			border-bottom-right-radius:62%;
		}