16

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

我的 CSS 是：

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

但是当我将它加载到有文本的地方时，该行变得模糊并且我不希望它那么我该怎么做呢？

小提琴示例

4

6 回答 6

50

尝试添加：

image-rendering: -webkit-optimize-contrast;
于 2016-02-12T13:45:42.793 回答
12

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

于 2016-10-26T08:07:06.800 回答
9

这是跨浏览器技术：

 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) */
于 2018-08-15T17:48:59.943 回答
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%;
}

更新的小提琴

于 2013-09-07T21:39:32.630 回答
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/

于 2019-07-03T12:44:23.777 回答
-2

我通过这样做得到了它：

background: transparent;

到h2andp元素。

于 2013-09-07T21:57:37.480 回答