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

您正在使用＆＃34;封面＆＃34;，这就是为什么在呈现页面时图像会变得模糊。如果使用的结果比屏幕更高，则问题将得到解决。只是尝试找到比屏幕更大的图像，并尝试使用开发人员工具。您将看到并理解其中的差异。

Answer 2

看起来你正在使用太小版本的图片，当图片放大超出自己的尺寸时变得模糊。

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

BTW：我重读了一个问题：你说你缺少咖啡杯和笔记本显示器的部分：这是因为显示的图像部分的宽度/高度不同。当您使用background-size: cover用背景图像填充整个可用空间时，会自动发生这种情况。 （我的回答的第一部分提到了模糊性）

Answer 3

也许尝试'background-size：100％;'它的背景总是宽100％

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

HTML

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

CSS

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