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

【问题标题】：CSS background image is rendered blurred and not entirelyCSS 背景图像呈现模糊且不完全
【发布时间】：2020-07-03 19:27:07
【问题描述】：

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

以下是图片在我的网站上的显示方式（来自 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;
}

我做错了什么？

【问题讨论】：

能否提供原图？您的屏幕截图上似乎一切正常
看起来两张图片的网址是一样的！！ 'i.stack.imgur.com/cOCqf.jpg'
修复图片网址
我应该如何修复它？是的你是对的。模糊了
你的意思是我应该改变图片本身的大小（比如说，在 Photoshop 中）？

标签： css

【解决方案1】：

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

【讨论】：

这就是我一直在说的...（在 cmets 中）;-)
我在发帖时没有看到您的评论。毕竟我们都出于同样的原因。对不起伙计。 :)
所以，看来我必须接受 Johannes 的回答，对吧？:)
我不在乎，只要你得到你的答案。我没有大自我:)

【解决方案2】：

也许试试“背景尺寸：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%;
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：