像我以前提到的那样，文本文档树中的每一个元素只是1个矩形框盒子。这些盒子都有1个情况层，情况层能够是彻底全透明或其它色调，还可以是1张照片。此情况层由8个CSS特性（再加1个简写的特性）操纵。
background-color
background-color特性设定元素的情况色调。它的值能够是随意合理合法的色调值或是transparent重要字。
.left { background-color: #ffdb3a; }
.middle { background-color: #67b3dd; }
.right { background-color: transparent; }
情况色调绘图在由[background-clip]（＃backgroundclip）特性特定的盒实体模型的地区内。假如还设定了任何情况图象，则在它们后边绘图色调层。与能够有好几个的图象层不一样，针对1个元素，大家只能有1个色调层。
background-image
background-image特性界定元素的1个或好几个情况图象。它的值一般是用url（）标记界定的图象的url。还可以应用none做为它的值，但这样会转化成1个空的情况层
.left { background-image: url('ire.png'); }
.right { background-image: none; }
大家还可以特定多张情况照片并根据逗号隔开。后边的照片都会绘图在Z轴方位上前1个照片的后边。
.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轴界定1次，还可以独立界定每一个维。
.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特性操纵操纵情况图象相对视口和元素的翻转方法 。它有3个潜伏的值。
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，大家能够随意组成这些重要字，假如只确立特定了1个重要字，那末此外1个默认设置便是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特性1样，它也 根据盒子实体模型的地区。
.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，假如只特定了1个盒实体模型地区，那末这两个特性都会运用这个值。假如特定了两个，那末第1个值将用于background-origin特性。
总结
以上所述是网编给大伙儿详细介绍的CSS中的情况特性background，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑欢迎给我留言，网编会立即回应大伙儿的！
Copyright © 2002-2020 微信小程序页面设计_python小程序_小程序首页模板_如何建立微信小程序_怎么做微信小程序 版权所有 （网站地图） 粤ICP备10235580号