如何防止背景图像变得模糊答案

【问题标题】：How to prevent the background image from getting blurry如何防止背景图像变得模糊
【发布时间】：2013-09-11 17:55:21
【问题描述】：

我需要知道如何让背景图像在 CSS 中的文本上方不模糊，因为如果它模糊会破坏我的网站的外观。

我的 CSS 是：

background: #ff0000 url(img/rain.jpg) top center repeat-y; 
background-size: 100%;

但是当我加载它时，有文字的地方会变得模糊，我不希望它那么我该怎么做呢？

Fiddle example

【问题讨论】：

我的代码是：背景：#ff0000 url(img/rain.jpg) top center repeat-y;背景尺寸：100%；但是当我把它加载到有文本的地方时，这条线会变得模糊，我不希望它那么我该怎么做呢？
把有问题的代码放在评论中......如果可能的话，请在 jsfiddle.net 中给我们一个活生生的例子
好的，谢谢，我以为 jsfiddle 只适用于 JavaScript
@JoshKeighley 您粘贴的代码很好。但可悲的是，不相关。相关的事情是看看那里的文本部分是什么。模糊是指“在文本下变灰”吗？可能是您有一个背景不完全透明的 div，但说只有 50%。您可以很容易地看到发生了什么，并且还可以使用诸如 Firebug 中的 CSS 工具之类的工具来纠正它...
哈哈更糟@RitabrataGautam！我会设置一个 JSFiddle！

标签： css image background blurry

【解决方案1】：

尝试添加：

image-rendering: -webkit-optimize-contrast;

【讨论】：

他们应该将它内置在具有此功能的浏览器中。为什么有人希望他们的图像模糊。呵呵
如果你用这个答案缩小图像，看起来会很糟糕

【解决方案2】：

尝试将其添加到代码中：image-rendering: pixelated; 对我来说效果很好。你也可以试试——image-rendering: -webkit-optimize-contrast;

【讨论】：

【解决方案3】：

这是跨浏览器技术：

 image-rendering: crisp-edges;
 image-rendering: -moz-crisp-edges;          /* Firefox */
 image-rendering: -o-crisp-edges;            /* Opera */
 image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
 -ms-interpolation-mode: nearest-neighbor;   /* IE (non-standard property) */

【讨论】：

【解决方案4】：

使用background-size: cover;background-position:50% 50%; 会帮助你..

* {
font-family: Calibri, Comic Sans MS, Serif;
background: #ff0000 url(http://www.coolguysite.co.uk/blog/templates/default/img/rain.jpg)   top center repeat-y;
background-size: cover;
background-position:50% 50%;
}

UPDATED FIDDLE

【讨论】：

【解决方案5】：

您可以使用image-rendering: pixelated。以下是来自 Mozilla 开发者网络的示例：

.pixelated {
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

https://jsfiddle.net/9dtj2wkq/

【讨论】：

【解决方案6】：

我做到了：

background: transparent;

到h2 和p 元素。

【讨论】：

透明背景如何防止背景图片变得模糊...