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" | 用于表示背景图片的大小,取值可以为百分比/数字/contain/cover。
其他两项取值都很好理解,对于contain和cover做了演示和学习,如下。
当取值为contain的时候
image.png
很明显,contain指的是,在适应元素大小的情况下,将整个图片全部显示出来
当取值为cover的时候
image.png
cover则是在保持原来图片纵横比的情况下,将整个元素覆盖,不留空隙。(所以明显图片没有被拉扯失真)
用于表示图片在元素中所处的位置,取值可以为padding-box/border-box/content/box
取值为content-box的时候
image.png
取值为padding-box的时候
image.png
取值为border-box的时候
以上是在border为透明的时候作出的尝试,如果border有自己的颜色比如下图,就会出现背景图片边缘被遮盖的情况,虽然这个时候看起来不像是图片已经覆盖到border的样子,但它实际上已经在border上了,只是因为border原本层级高于背景,所以会被遮挡。
用于表示背景图片是否随着元素的上下滚动而滚动,取值有fixed/scroll/inherit。
scroll
fixed
且上述操作都是在图片可重复的情况下进行的,如果图片不可重复就会出现在取值scroll的时候图片会因为滚动而消失在视野里,而fixed则不会,尤其在有文本对照的时候最为明显。
[CSS] 纯文本查看 复制代码 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;
}
效果图
|