如何避免背景图片模糊化？

Question

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

我的CSS代码是：

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

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

演示例子

- Josh Keighley

---

@JoshKeighley 你贴的代码很好。但遗憾的是，它并不相关。相关的事情应该是看看那里的文本部分有什么问题。你所说的模糊是指“在文本下面变灰色”吗？可能是因为你有一个div，其背景不完全透明，只有50%。你可以轻松地看到发生了什么，并且还可以使用类似Firebug中的CSS工具来进行修正... - ppeterka

哈哈，@RitabrataGautam更糟糕了！我将建立一个JSFiddle！ - Josh Keighley

JSFiddle：http://jsfiddle.net/jmkeighley/59ELc/ 你看到文字后面变得模糊了吗？ - Josh Keighley

完成了！@RitabrataGautam - Josh Keighley

请查看我的答案和更新后的 fiddle。 - RbG

Answer 1

尝试添加：

image-rendering: -webkit-optimize-contrast;

- Kirill A

---

他们应该在浏览器中内置此功能。为什么有人想要他们的图像模糊呢？傻瓜。 - manish kumar

如果你用这个答案来缩小图片，它会看起来很糟糕。 - Jeffrey Neo

Answer 2

以下是跨浏览器技术：

 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) */

- Ric Flair

Answer 3

尝试将以下代码添加到您的代码中：image-rendering: pixelated; 对我来说效果非常好。您还可以尝试- image-rendering: -webkit-optimize-contrast;

- Nurealam Sabbir

Answer 4

您可以使用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/

- tosh

Answer 5

使用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%;
}

更新后的JSFiddle链接

- RbG

Answer 6

我是通过以下方式得到的：

background: transparent;

将 h2 和 p 元素添加到

中。

- Josh Keighley

---

透明背景如何避免背景图像模糊？ - trainoasis