background系列属性
background是一个简写属性，其属性值可以包括
backgrund-color
background-image
background-position/background-size
background-size
background-origin
background-attachment
background属性学习
- background-color
用于表示元素的背景颜色，取值可以是十六进制色号也可以是rgba，或者是hsl。
- background-image
用于表示元素的背景图片，与上述的background-color互不冲突，取值为图片所在路径。
- background-position
用于表示背景图片的位置，它的取值有两项：x与y，x表示距离左侧边界的长度，y表示距离顶部边界的长度。
取值举例
| 值 | 描述 |
|---|---|
| x(px）y(px) | 第一个值代表水平，第二个值代表垂直。单位可以是例子中的像素px，也可以是别的一些常见的css单位，比如em。而当只取一个值的时候，那么第一个值就是所取值，第二个值默认为50% |
| x% y% | 两个值的含义同上，当图片位置在左上角的时候就是0% 0%，当为右下角时就是100% 100%，同样，如果只设置了一个值，那么就默认第二个值为50% |
| left top, left bottom, left center, right top, right bottom, right center, center top, center bottom, center bottom | 仅指定一个关键字，其他值将会是"center" |
- background-size
用于表示背景图片的大小，取值可以为百分比/数字/contain/cover。
其他两项取值都很好理解，对于contain和cover做了演示和学习，如下。
当取值为contain的时候
image.png
很明显，contain指的是，在适应元素大小的情况下，将整个图片全部显示出来
当取值为cover的时候
image.png
cover则是在保持原来图片纵横比的情况下，将整个元素覆盖，不留空隙。（所以明显图片没有被拉扯失真）
- background-origin
用于表示图片在元素中所处的位置，取值可以为padding-box/border-box/content/box
取值为content-box的时候
image.png
取值为padding-box的时候
image.png
取值为border-box的时候
image.png
以上是在border为透明的时候作出的尝试，如果border有自己的颜色比如下图，就会出现背景图片边缘被遮盖的情况，虽然这个时候看起来不像是图片已经覆盖到border的样子，但它实际上已经在border上了，只是因为border原本层级高于背景，所以会被遮挡。
image.png
- background-attachment
用于表示背景图片是否随着元素的上下滚动而滚动，取值有fixed/scroll/inherit。
scroll
image.png
fixed
image.png
且上述操作都是在图片可重复的情况下进行的，如果图片不可重复就会出现在取值scroll的时候图片会因为滚动而消失在视野里，而fixed则不会，尤其在有文本对照的时候最为明显。
html,body {
width: 100%;
height: 100%;
margin: 0;
background: #000;
}
.color-con {
width: 50%;
height: 50%;
margin: 20px;
padding: 20px;
/*background: url("./imgs/img01.jpg");*/
background-color: #666;
background-image: url('./imgs/img01.jpg');
background-size: 50% auto;
background-position: 50% 50%;
background-origin: content-box;
background-clip: content-box;
background-repeat: no-repeat;
}
效果图
image.png
网友评论