css background-size与背景图片填满div的具体研究包括cover contain属性测试

background-size的取值及解释

background-size共有三种属性,分别为

background-size: cover

MDN文档解释说明:缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). The image “covers” the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

这里的关键说明在于标红的两个区域,分别是它会保持图片的宽高比当图像和容器具有不同的尺寸时,图像被左/右或顶部/底部裁剪。之后会结合例子说明

background-size: contain

MDN文档解释说明:缩放背景图片以完全装入背景区,可能背景区部分空白。A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.

这里的关键说明在于标红的两个区域,分别是它会保持图片的宽高比当图像和容器具有不同的尺寸时,空区域(左/右/上/右)填充背景色。之后会结合例子说明

background-size: width-value,height-value;

分为固定大小百分比auto,固定大小就是写死;auto就是以背景图片的比例缩放背景图片。。

百分比的的MDN文档解释说明<percentage> 值,指定背景图片相对背景区(background positioning area)的百分比。背景区由background-origin设置,默认为盒模型的内容区与内边距,也可设置为只有内容区,或者还包括边框。如果attachment 为fixed,背景区为浏览器可视区(即视口),不包括滚动条。不能为负值。

作者: 浮云网

我们是一群满怀梦想的年轻人,不断努力改变乏味的互联网,非常感谢有您的支持我们才能把内容做的更好.

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s