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

百变鹏仔

当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

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

作者:鹏仔先生日期:2020-06-03 09:40:35浏览:2221分类: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

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

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


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯