background-color
background-color属性设置元素的背景色彩。它的值可所以恣意正当的色彩值或许是transparent关键字。
.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }
相干教程：CSS视频教程
背景色彩绘制在由[background-clip]（＃backgroundclip）属性指定的盒模子的地区内。假如还设置了任何背景图象，则在它们背面绘制色彩层。与能够有多个的图象层差别，关于一个元素，我们只能有一个色彩层。
background-image
background-image属性定义元素的一个或多个背景图象。它的值通常是用url（）标记定义的图象的url。也能够运用none作为它的值，但如许会生成一个空的背景层
.left { background-image: url('ire.png'); }
.right { background-image: none; }
我们也能够指定多张背景图片并经由过程逗号分开。背面的图片都邑绘制在Z轴方向上前一个图片的背面。
.middle {
background-image: url('khaled.png'), url('ire.png');
/* Other styles */
background-repeat: no-repeat;
background-size: 100px;
}
background-repeat
background-repeat属性掌握背景图片在被[background-size]（＃backgroundsize）属性改变了大小及被[background-position]（＃backgroundposition ）属性定位后怎样平铺。
该属性的值可所以 repeat-x, repeat-y, repeat, space, round, no-repeat关键字，除了repeat-x和repeat-y,其他值能够为x轴和y轴定义一次，也能够零丁定义每一个维。
.top-outer-left { background-repeat: repeat-x; }
.top-inner-left { background-repeat: repeat-y; }
.top-inner-right { background-repeat: repeat; }
.top-outer-right { background-repeat: space; }
.bottom-outer-left { background-repeat: round; }
.bottom-inner-left { background-repeat: no-repeat; }
.bottom-inner-right { background-repeat: space repeat; }
.bottom-outer-right { background-repeat: round space; }
background-size
background-size属性定义背景图片的大小，它的值可所以关键字，长度或许百分比。
可用于此属性的关键字为“contains”和“cover”。contain将等比缩放图象到最大的大小。另一方面，cover将把图象缩放到尽量小的尺寸，个中全部背景地区依然被掩盖。
.left {
background-size: contain;
background-image: url('ire.png');
background-repeat: no-repeat;
}
.right { background-size: cover; /* Other styles same as .left */ }
关于长度和百分比，我们能够同时指定背景图片的宽高，百分比值是依据元素的大小盘算的。
.left { background-size: 50px; /* Other styles same as .left */ }
.right { background-size: 50% 80%; /* Other styles same as .left */ }
background-attachment
background-attachment属性掌握掌握背景图象相关于视口和元素的转动体式格局 。它有三个潜伏的值。
fixed意味着背景图片牢固在视口而且不会挪动，即运用户正沿着视口转动。local意味着背景图片牢固在它在元素中的位置。假如这个元素能够转动而且背景图片定位在顶部，那末当用户向下转动这个元素，背景图片将会从视图中滚出去。末了scroll意味着背景图片是牢固的且不会跟着元素内容的转动而转动。
.left {
background-attachment: fixed;
background-size: 50%;
background-image: url('ire.png');
background-repeat: no-repeat;
overflow: scroll;
}
.middle { background-attachment: local; /* Other styles same as .left */ }
.right { background-attachment: scroll; /* Other styles same as .left */ }
background-position
这个属性连系background-origin属性定义背景图片的肇端位置应在那边。它的值可所以关键字，长度或许百分比，我们能够指定沿x轴和y轴的位置。
可用于此属性的关键字为top, right, bottom, left, 和center，我们能够恣意组合这些关键字，假如只明白指定了一个关键字，那末别的一个默许就是center。
.top-left {
background-position: top;
background-size: 50%;
background-image: url('ire.png');
background-repeat: no-repeat;
}
.top-middle { background-position: right; /* Other styles same as .top-left */ }
.top-right { background-position: bottom; /* Other styles same as .top-left */ }
.bottom-left { background-position: left; /* Other styles same as .top-left */ }
.bottom-right { background-position: center; /* Other styles same as .top-left */ }
关于长度和百分比，我们也能够指定沿x轴和y轴的位置。百分比值是按元素的大小盘算的。
.left { background-position: 20px 70px; /* Others same as .top-left */ }
.right { background-position: 50%; /* Others same as .top-left */ }
background-origin
background-origin属性指定背景图片应依据盒模子的哪一个地区举行定位。
当值为border-box时，背景图片的位置依据边框地区定位，为padding-box时其位置依据边距地区定位，为content-box时其位置依据内容地区定位。
.left {
background-origin: border-box;
background-size: 50%;
background-image: url('ire.png');
background-repeat: no-repeat;
background-position: top left;
border: 10px dotted black;
padding: 20px;
}
.middle { background-origin: padding-box; /* Other styles same as .left*/ }
.right { background-origin: content-box; /* Other styles same as .left*/ }
background-clip
background-clip属性肯定背景绘制地区，这是背景能够被绘制的地区。和background-origin属性一样，它也 基于盒子模子的地区。
.left{
background-clip: border-box;
background-size: 50%;
background-color: #ffdb3a;
background-repeat: no-repeat;
background-position: top left;
border: 10px dotted black;
padding: 20px;
}
.middle { background-clip: padding-box; /* Other styles same as .left*/ }
.right { background-clip: content-box; /* Other styles same as .left*/ }
background
末了，background属性是其他背景相干属性的简写。子属性的递次可有可无，由于每一个属性的数据类型差别。但是关于background-origin 和 background-clip，假如只指定了一个盒模子地区，那末这两个属性都邑运用这个值。假如指定了两个，那末第一个值将用于background-origin属性。
以上就是浅谈CSS的background背景属性的细致内容，更多请关注ki4网别的相干文章！
