CSS background属性

background：
        1、backgound-color: 背景颜色（所有浏览器都支持）

可能的值：

background-color: lightblue;
background-color: #ff0; 
background-color: rgb(255,0,0); 
background-color: transparent; //默认值,透明色

背景范围：内容、内边距和边框

javascript语法：

object.style.backgroundColor = "#ff0000";

        2、backgound-position: 背景图像的起始位置（background-image设置的图像）（所有浏览器都支持）

注意：需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

可能的值：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。

background: url(images/img4.jpg);
	background-attachment: fixed;
	background-position: 50px 50px;
	background-position: bottom right;
	background-position: 50% 30%;

javascript语法：

object.style.backgroundPosition = "center";

       3、 backgound-size: 背景图像的大小（IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。）

值	描述
length	设置背景图像的高度和宽度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background: url(images/img4.jpg);
	background-size: 200px 100px;
	background-size: 100% 100%;
	background-size: cover;
	background-size: contain;

 javascript语法：

object.style.backgoundSize = "100px 150px";

        5、backgound-repeat: 背景图像如何重复（所有浏览器都支持）

可能的值

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

javascript语法：

object.style.backgroundRepeat = "no-repeat"; 

       6、 backgound-origin: 背景图像的定位区域（IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 属性。）

注意：background-origin 属性规定 background-position 属性相对于什么位置来定位。如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

语法：background-origin: padding-box|border-box|content-box;

值	描述
padding-box	背景图像相对于内边距框来定位。默认值
border-box	背景图像相对于边框盒来定位。
content-box	背景图像相对于内容框来定位。

       

.wrapper{
	width: 200px;
	height: 200px;
	padding: 30px;
	background: lightblue url(images/2.jpg) no-repeat;
	border: 5px dotted #f00;
	background-origin: padding-box;
	margin: 100px;
}

background-origin: padding-box;

background-origin: border-box;

background-origin: content-box;

7、backgound-clip: 背景的绘制区域（IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。）

语法：background-clip: border-box|padding-box|content-box;

值	描述
border-box	背景被裁剪到边框盒。默认值
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

javascript语法：

obejct.style.backgroundClip = "content-box";

 

       8、 backgound-attachment: 背景图像是否固定或随着页面的其它区域滚动(所有浏览器都支持)

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

        backgound-image: 背景图像（所有浏览器都支持），IE8及更早版本不支持一个元素多个背景图像

        简写语法：background:color image position/size repeat origin clip attachment;

9、渐变

 

.wrapper{
width: 200px;height: 200px;
margin: 100px;
border-radius: 50%;
/*线性渐变*/
/*兼容*/
background: -webkit-linear-gradient(#f60,#f7f7f7);
background: -moz-linear-gradient(#f60,#f7f7f7);
background: -o-linear-gradient(bottom right,#f60,#f7f7f7);
background: linear-gradient(#f60,#f7f7f7); 
background: linear-gradient(#f00,#f60,#f7f7f7);
background: linear-gradient(90deg,#f60,#f7f7f7);
/*transparent透明度*/
background: linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1));
/*标准语法，写在最后*/
/*background: linear-gradient(to bottom right,#f60,#f7f7f7);*/
/*repeating-linear-gradient() 函数用于重复线性渐变,需要兼容*/
background: -webkit-repeating-linear-gradient(#f60 30%,#f7f7f7 70%);
background: -moz-repeating-linear-gradient(#f60 30%,#f7f7f7 70%);
background: -o-repeating-linear-gradient(#f60 30%,#f7f7f7 70%);
background: repeating-linear-gradient(#f60 30%,#f7f7f7 70%);
width: 200px;
height: 50px;
/*径向渐变 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。*/
background: -webkit-radial-gradient(ellipse,#ccc 10%,#7676f1 30%,#ccc);			
background: -moz-radial-gradient(ellipse,#ccc 10%,#7676f1 30%,#ccc);			
background: -o-radial-gradient(ellipse,#ccc 10%,#7676f1 30%,#ccc);			
background: radial-gradient(ellipse,#ccc 10%,#7676f1 30%,#ccc);		
/*重复径向渐变*/	
background: repeating-radial-gradient(ellipse,#ccc 10%,#7676f1 30%,#ccc);			
}