web前端基础——背景图片

最新推荐文章于 2024-06-20 23:28:37 发布

NGUP_LEE

最新推荐文章于 2024-06-20 23:28:37 发布

阅读量2.2k

点赞数 1

分类专栏： web前端基础文章标签： django python 后端

本文链接：https://blog.csdn.net/NGUP_LEE/article/details/123231580

版权

14 篇文章 3 订阅

订阅专栏

这篇博客详细介绍了CSS中的`background-size`属性，包括其作用、语法和不同取值。`contain`使得背景图片等比例缩放以适应容器，可能有留白；而`cover`则确保图片填满整个容器，可能会裁剪部分图片。理解这些取值有助于精确控制网页背景图片的展示效果。

摘要由CSDN通过智能技术生成

作用：设置背景图片大小

语法：background-size: 宽度高度

取值：

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，直到不会超出盒子的最大范围
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

原图效果
在这里插入图片描述

contain效果
在这里插入图片描述

如果图的宽或高与盒子的尺寸相同了，另一个方向会停止缩放，导致盒子可能会有留白

cover效果
在这里插入图片描述

保证图片的宽和高与盒子的尺寸完全相同，有可能导致图片显示不全

关注

专栏目录