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

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

我的CSS是：

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

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

Fiddle example

解决方法

尝试添加：

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