Question

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

我的CSS是：

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

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

Fiddle example

Answer 1

尝试添加：

图像呈现：-webkit-optimize-contrast;

Answer 2

尝试将此添加到代码中：image-rendering: pixelated;对我而言，它完美无缺。您也可以尝试 - image-rendering: -webkit-optimize-contrast;

Answer 3

使用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

Answer 4

我做到了：

background: transparent;

到h2和p元素。

Answer 5

这是跨浏览器技术：

 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 6

您可以使用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 个答案: