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

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