在使用background-size的时候遇到的一点点的疑惑,所以重温一下background-size的一些用法。
语法:
background-size:auto|length|cover|contain|initial|inherit;
- 默认值:auto;
- length(绝对值):设置背景图片的宽高。若第一个被设定了,那么第二个的值为auto;
- percentage(百分比):相对父元素宽高的百分比来设置背景图片的大小。
- cover:拉伸背景图片以使背景图片尽可能的铺满背景区域。致使部分图片可能不会在背景区域内。
- contain:缩放图片使得它的宽高都能被包含在内容区域内。
- initial:初始化
- inherit: 继承
总结:
- background的缩写:background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
如果同时简写bg-position和bg-size的话中间要加斜杠/;若同时使用多个图片背景,并且需要背景颜色的话,背景颜色属性需放到最后
- 百分比设置是相对于父元素,而不是相对于本身,这个应该注意一下。