0

小提琴_

我有 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 会模糊同一图像。但是它就是这样啊。

4

1 回答 1

0

我遇到了同样的问题，这让我疯狂了 1 个小时……谷歌只指出了效果……而不是错误 :)

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

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

于 2014-02-10T16:03:55.890 回答