Question

我有3张背景图片，全部高10px，宽181px。在181px宽且可变高度的元素内部，我将图像1放置在元素的顶部，将image2放置在元素的底部，并且图像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_bg.png替换sm-urhere_top.png或sm-urhere_bottom.png，那么在不重复时它只会模糊。我使用相同的程序制作了所有三个图像，它们的大小相同，并且我使用相同的压缩保存它们。是什么给了什么？

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

提前致谢。

以下是元素的HTML：

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

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

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

Answer 1

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

因此，为了将来参考它似乎只有当某些png背景中的Zoomed（如菜单或按钮的角落）变得模糊不清时，即使是110％。

我没有看到这一点，但这对我来说是个问题。

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

1 个答案: