背景图像在重复时清晰，否则模糊答案

【问题标题】：Background images are crisp when repeated, blurry otherwise背景图像在重复时清晰，否则模糊
【发布时间】：2014-02-11 00:03:55
【问题描述】：

fiddle

我有 3 个背景图像，它们都是 10 像素高和 181 像素宽。在一个 181px 宽和可变高度的元素内部，我将图像 1 放在元素的顶部，将图像 2 放在元素的底部，并且图像 3 一直向下重复。代码如下：

#sidemenu li a.currentpage {
    background:     url(images/sm-urhere_top.png) no-repeat center top,
            url(images/sm-urhere_bottom.png) no-repeat center bottom,
            url(images/sm-urhere_bg.png) repeat-y center top;
    }

sm-urhere_top.png 和 sm-urhere_bottom.png 都有些模糊（我有点喜欢这种效果），但 images/sm-urhere_bg.png 很清晰。其实如果我把sm-urhere_top.png或者sm-urhere_bottom.png换成sm-urhere_bg.png，只有不重复的时候才会模糊。我使用相同的程序制作了所有三张图像，它们的大小相同，并且我以相同的压缩方式保存了它们。什么给了？

编辑：它似乎只发生在 Chrome 中，而不是 Firefox。 chrome是否有理由仅在不重复的情况下才会模糊图像？有没有办法模糊 chrome 中的重复图像？

提前致谢。

这是元素的 HTML：

`<ul class="normal">`
`    <li><a href="#" title="This is the description." class="currentpage">Current Page</a></li>`
`</ul>`

好的，我想我想通了 - 有点。顶部和底部图像具有圆角。出于某种原因，chrome 会看到角落的细节并模糊图像以使其看起来更好。为了解决这个问题，我在中间图像中添加了一些离散的细节，瞧。

仍然不明白为什么如果不重复，chrome 会模糊相同的图像。但是它就是这样啊。

【问题讨论】：

你也可以发布一些 HTML 吗？我是jsfiddle.net 也会很棒
我们需要一个工作示例来遇到与您相同的问题，然后我们可以对其进行调查。您的 HTML 中的#sidemenu 在哪里？您可以使用 jsfiddle，向我们展示一个解决问题的工作示例并将其发送到这里吗？
对不起，我对 jsfiddle 不熟悉。我正在尝试，但我没有看到上传照片的方法。有办法吗？还是应该只添加没有照片的代码？
照片没问题，我们可以自己测试一下:)
jsfiddle.net/kCBDH/2 希望有效。

标签： css image background

【解决方案1】：

我有同样的问题，它让我疯狂了 1 小时...... 谷歌只指出我的效果..而不是错误:)

因此，为了将来参考，它似乎只是在放大某些 png 背景（如菜单或按钮的角）时变得模糊难看，即使在 110% 时也是如此。

我看不出这有什么意义，但这对我来说是个问题。

【讨论】：