HTML+CSS 背景图片大小设置问题(background-size)

最新推荐文章于 2024-09-23 11:30:52 发布

前端猪

最新推荐文章于 2024-09-23 11:30:52 发布

阅读量2.7w

点赞数 8

分类专栏：不懂复习文章标签： html html5 css css3

本文链接：https://blog.csdn.net/ChangAnbaba/article/details/107595084

版权

不懂复习专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML和CSS中background-size属性的使用，重点讲解了'cover'和'contain'两个值的效果。'cover'会将背景图片扩展以完全覆盖背景区域，而'contain'则会确保图片的宽高完全适应内容区域，可能留下空白。在实际案例中，一个300px*200px的div应用背景图片时，通过设置background-size为300px 200px，可以调整图片大小以匹配div尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记得我刚开始学的时候，做作业很多次都遇到背景不能铺满问题。

background-size

属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;
单位： 长度|百分比|cover|contain;

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

像这样
在这里插入图片描述
背景图片并不能完全缩放至跟我div的大小一样。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            background: url(http://up.deskcity.org/pic_360/20/70/73/2070733e9322826869576bb01aee40d8.jpg) no-repeat;
            background-size: 300px 200px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>