CSS 背景图像呈现模糊且不完全

Question

我在尝试将图像作为背景放置在我的网站上时遇到问题。 原始图像如下所示：

这是图像在我的网站上的显示方式（来自 Chrome）：

如您所见，图片并未完全渲染（从咖啡杯和笔记本显示屏上可以清楚地看到）。

这是我使用的CSS：

 body {
    overflow:hidden;
    background: url('/static/media/images/welcome1.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover; 
    background-size: cover;
}

我做错了什么？

Answer 1

您正在使用“封面”，这就是页面渲染时图像变得模糊的原因。如果您使用比屏幕分辨率更高的图像，问题就会得到解决。只需尝试找到比屏幕更大的图像，然后使用开发人员工具进行尝试即可。您将看到并理解其中的差异。

Answer 2

也许尝试“背景大小：100%；”它的背景宽度始终为 100%

示例 - https://jsfiddle.net/grinmax_/g5sht11p/

.container {
  width: 100vw;
  height: 100vh;
  background: url(https://i.sstatic.net/SK2W1.jpg) no-repeat;
  background-size: 100%;
}

<div class="container"></div>

Answer 3

您使用的图片版本似乎太小，当放大到超出其自身尺寸时，它会变得模糊。

如果可能，请使用更大的版本：这是来自 pixabay 或其他网站的库存照片，不是吗？去那里看看是否有更大的版本可用（通常有），然后使用它。

顺便说一句：我重读了这个问题：你说你缺少咖啡杯和笔记本显示器的部分：这是由于显示的图像部分的宽度/高度比例不同。当您使用

background-size: cover

用背景图像填充整个可用空间时，这种情况会自动发生。 （我的回答的第一部分提到了模糊性）