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

  • 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/pic_360/20/70/73/2070733e9322826869576bb01aee40d8.jpg) no-repeat;
            background-size: 300px 200px;
        }
    </style>
</head>

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

</html>

我的div宽是300px，高是200px。所以的我background-size宽高也为300px，200px。

效果:

更多推荐

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