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

Question

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

我的CSS是:

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

但是当我把它加载到有文字线条变得模糊的地方并且我不想要它的时候我怎么做呢？

小提琴的例子

Answer 1

尝试添加:

图像渲染:-webkit-optimize-contrast;

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

Answer 3

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

Answer 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%;
}

更新的小提琴

Answer 5

尝试将此添加到代码中:image-rendering: pixelated;对我来说它完美无缺.你也可以尝试 - image-rendering: -webkit-optimize-contrast;

Answer 6

我通过这样做得到了它：

background: transparent;

到h2和p元素。