背景尺寸：封面；不覆盖屏幕

Question

html 这里是新手，我正在尝试使用background-size: cover; 使图像覆盖整个屏幕，我仍然有这个差距。 我怎样才能解决这个问题？ 我觉得这与这部分有关：

 body {
        background-image: url("hexagon.gif");
        background-size: cover;

我试图用 .background-image 替换 body 这个词，但随后整个页面变成空白。 我该如何解决？ 谢谢！

<!DOCTYPE html>
<html>
<head>
  <meta name= viewport content= width="device-width initial-scale=1.0">
</head>
<body>
  <div class="background-image">
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      body {
        background-image: url("hexagon.gif");
        background-size: cover;
        background-repeat: no-repeat;
        height: 100hv;
        background-color: #cccccc;
    }
    </style>
  </div>
</body>


</html>

Answer 1

`cover`

您在代码中遗漏的是，

height:100hv语法错误，改成height:100vh
我们还需要设置容器的宽度，你错过了，所以添加width:100vw

现在你需要的代码是：

<!DOCTYPE html>
<html>
<head>
  <meta name= viewport content= width="device-width initial-scale=1.0">
</head>
<body>
  <div class="background-image">
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      body {
        background-image: url("hexagon.gif");
        background-size: cover;
        background-repeat: no-repeat;
        height: 100vh;/*CORRECTED SYNTAX ERROR*/
        width: 100vw;/*ADDED CODE*/
        background-color: #cccccc;
    }
    </style>
  </div>
</body>


</html>

可运行示例：

 * { margin: 0; padding: 0; } body { background-image: url("https://picsum.photos/1800/900");/*Example*/ background-size: cover; background-repeat: no-repeat; height: 100vh;/*CORRECTED SYNTAX ERROR*/ width: 100vw;/*ADDED CODE*/ background-color: #cccccc; }

用于拉伸

使用background-size:100vw 100vh; ,
或background-size:100% 100%; 如果高度和宽度都设置为height:100vh;width:100vw;

您期望的代码是：

<!DOCTYPE html>
<html>
<head>
  <meta name= viewport content= width="device-width initial-scale=1.0">
</head>
<body>
  <div class="background-image">
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      body {
        background-image: url("hexagon.gif");
        background-size: 100vh 100vh;
        background-repeat: no-repeat;
        background-color: #cccccc;
        /*OR USE THE BELOW*/
        /*
        background-image: url("hexagon.gif");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100vw;
        background-color: #cccccc;
        */
    }
    </style>
  </div>
</body>


</html>

可运行示例：

 * { margin: 0; padding: 0; } body { background-image: url("https://picsum.photos/1800/900");/*Example*/ background-size:100vw 100vh; background-repeat: no-repeat; background-color: #cccccc; }

背景尺寸：封面；不覆盖屏幕

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-04-08 11:35:34

`cover`

现在你需要的代码是：

可运行示例：

用于拉伸

您期望的代码是：

可运行示例：

背景尺寸：封面； 不覆盖屏幕

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-04-08 11:35:34

cover

现在你需要的代码是：

可运行示例：

用于拉伸

您期望的代码是：

可运行示例：

背景尺寸：封面；不覆盖屏幕

解决方案1
1 已采纳 2022-04-08 11:35:34

`cover`