CSS 如何防止背景图像变得模糊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18677983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent the background image from getting blurry
提问by Josh Keighley
I need to know how to get the background image to not be blurry when text is over it in CSS as it spoils the look of my website if it's blurry.
我需要知道如何在 CSS 中文本覆盖时使背景图像不模糊，因为如果它模糊，它会破坏我网站的外观。
My CSS is:
我的 CSS 是：
background: #ff0000 url(img/rain.jpg) top center repeat-y;
background-size: 100%;
But when I load it up where there is text that line goes blurry and I don't want it to so how do I do this?
但是当我将它加载到有文本的地方时，该行变得模糊，我不希望它如此，我该怎么做？
采纳答案by Josh Keighley
I got it by doing:
我通过这样做得到了它：
background: transparent;
to the h2and pelements.
到h2和p元素。
回答by Kirill A
Try to add:
尝试添加：
image-rendering: -webkit-optimize-contrast;
回答by Nurealam Sabbir
Try adding this to the code: image-rendering: pixelated;For me it worked perfectly.
you can also try - image-rendering: -webkit-optimize-contrast;
尝试将其添加到代码中：image-rendering: pixelated;对我来说，它工作得很好。你也可以试试—— image-rendering: -webkit-optimize-contrast;
回答by Ritabrata Gautam
use of background-size: cover;background-position:50% 50%;will help you..
使用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%;
}
回答by Ric Flair
Here's the cross browser technique:
这是跨浏览器技术：
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) */
回答by tosh
You can use image-rendering: pixelated. Here is an example from the Mozilla Developer Network:
您可以使用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://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
