如何防止背景图像变得模糊
Posted
技术标签:
【中文标题】如何防止背景图像变得模糊【英文标题】：How to prevent the background image from getting blurry 【发布时间】：2013-09-11 17:55:21 【问题描述】：我需要知道如何让背景图像在 CSS 中的文本上方不模糊，因为如果它模糊会破坏我的网站的外观。
我的 CSS 是：
background: #ff0000 url(img/rain.jpg) top center repeat-y;
background-size: 100%;
但是当我加载它时，有文字的地方会变得模糊，我不希望它那么我该怎么做呢？
Fiddle example
【问题讨论】：
我的代码是：背景：#ff0000 url(img/rain.jpg) top center repeat-y;背景尺寸：100%；但是当我把它加载到有文本的地方时，这条线会变得模糊，我不希望它那么我该怎么做呢？ 把有问题的代码放在评论中......如果可能的话，请在 jsfiddle.net 中给我们一个活生生的例子 好的，谢谢，我以为 jsfiddle 只适用于 javascript @JoshKeighley 您粘贴的代码很好。但可悲的是，不相关。相关的事情是看看那里的文本部分是什么。模糊是指“在文本下变灰”吗？可能是您有一个背景不完全透明的 div，但说只有 50%。您可以很容易地看到发生了什么，并且还可以使用诸如 Firebug 中的 CSS 工具之类的工具来纠正它... 哈哈更糟@RitabrataGautam！我会设置一个 JSFiddle！ 【参考方案1】：尝试添加：
image-rendering: -webkit-optimize-contrast;
【讨论】：
他们应该将它内置在具有此功能的浏览器中。为什么有人希望他们的图像模糊。呵呵 如果你用这个答案缩小图像，看起来会很糟糕【参考方案2】：尝试将其添加到代码中：image-rendering: pixelated; 对我来说效果很好。
你也可以试试——image-rendering: -webkit-optimize-contrast;
【讨论】：
【参考方案3】：这是跨浏览器技术：
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) */
【讨论】：
【参考方案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%;
UPDATED FIDDLE
【讨论】：
【参考方案5】：您可以使用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】：我做到了：
background: transparent;
到h2 和p 元素。
【讨论】：
透明背景如何防止背景图片变得模糊...以上是关于如何防止背景图像变得模糊的主要内容，如果未能解决你的问题，请参考以下文章