百变鹏仔-专注前端行业精选

背景尺寸 background-size 属性语法介绍以及使用

作者：鹏仔先生日期：2020-06-03 09:40:35浏览：2649分类：CSS

语法:

background-size: 值;

1. length

该属性值是设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，如果只设置第一个值，第二个值自动为auto，等比例缩放

eg:

background-size: 300px 100px; /*有可能变形*/
background-size: 300px;

注: 背景图有可能会发生变形

2. 百分比设置

以父元素的百分比来设置背景图的宽度和高度，第一个值代表宽，第二个值代表高，如果省略号第二个值，为auto，等比例缩放

eg:

background-size: 100% 100%; /*背景图有可能发生变形，但背景图不会超出容器*/
background-size: 100%; /*背景图不会发生变形，但背景图有可能会超出容器*/

3. cover

将背景图扩展至足够大，以使背景图能够完全覆盖背景区域，背景图有可能超出容器，背景图不会发生变形

eg:

background-size: cover;

4. contain

把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域，背景图像始终被包含在容器内，背景图不会发生变形

注: 背景图的宽高会根据容器的尺寸适应其中某个方向的尺寸

前端 css

手机扫码访问

猜你还喜欢