我想制作高清图片作为我的响应背景

Question

所以我想制作一张图片（2988 x 2988）作为我的背景我试过这段代码作为我的css

   body {
   background-image: url(images/nicholas-kwok-225380-unsplash.jpg);
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-color:#464646;
  }

请看图片，了解我在说什么

谢谢！

Answer 1

body {
   background-image: url('images/nicholas-kwok-225380-unsplash.jpg');
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-color:#464646;
   margin:0;           /* 1 */
   width:100%;         /* 2 */
   min-height:100vh;   /* 3 */
   height:auto;        /* 4 */
}

1：正如评论中所述，Body HTML元素通常具有默认的边距值（0.5rem），这意味着它无法自然覆盖屏幕尺寸完全。

2：将图像设置为缩放到正文的大小。

3：将正文设置为整个屏幕视口高度的最小高度。因此，如果身体内容小于屏幕尺寸，您仍然可以看到全身背景图像。

4：针对某些浏览器（IE / Edge）的修补程序，这些浏览器不会接受min-height值设置，而且还设置了height值。

作为一个重要但侧面的问题：您的图片尺寸（2988像素x 2988像素）巨大，对于95％的网站浏览者来说非常不切实际。您应该考虑将图像大小缩小到更常见的（~1800px）和/或使用某种图像优化工具来从根本上减少文件大小。

客户端需要下载图像文件，因此在~12Kb网页上加载~400Kb图像（例如）将是服务器服务的一大负担，并且客户端浏览器获取和加载的速度会很慢进入记忆。

我建议缩小图像像素尺寸和运行它through an optimiser tool。

或

您应该在CSS中使用媒体查询，这样您只需要为当前客户端屏幕宽度加载最大的图像。 480px屏幕上的用户不需要2988像素宽的图像。

如果您将一个非常大的图像加载到一个小屏幕空间，浏览器将首先下载整个图像（浪费超过90％的数据），然后严重/快速重新缩放图像以适应屏幕 - 通过使用快速但不精确的缩放算法看起来比实际更糟糕。

<强>更新

要在后台显示 完整 图片而不考虑屏幕大小，您需要将cover更改为contain，因此：

 background-size: contain;

Answer 2

  

你想保持宽高比还是只想让它填满整个空间？

  

@shomz，我希望它能填满整个空间（屏幕）！

根据上面的评论，简单起见：

background-size: 100% 100%;

应该这样做。这将始终拉伸图像以填满您的屏幕。

见这里：

body {
   background-image: url(https://www.picpng.com/images/large/hat-male-man-person-silhouette-transparent-95008);
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: 100% 100%;
   background-color:#464646;
  }