【发布时间】：2013-03-02 06:12:00
【问题描述】：
我正在尝试在具有可变尺寸的元素上使用背景图像作为精灵。因此，我对background-size 和background-position 使用基于百分比的值。
我在 Opera（最新版本，12.14）中遇到了这个问题。我怀疑是background-position 和background-size 与基于百分比的值的组合导致了不当行为。我搜索了任何相关信息或已确认的问题，但均未果。
为了演示我面临的问题，我创建了一个 560 x 560 像素的图像，主要是橙色，除了右下角的蓝色正方形，尺寸为 112 x 112 像素，大小的五分之一图像。
要将此图像作为背景应用到元素，使蓝色方块完全准确地覆盖它，而不管元素的尺寸如何，我使用了以下样式：
.square
{
background-size: 500% 500%;
background-position: -400% -400%;
}
这在除 Opera 之外的所有浏览器中都能完美运行，它会在元素的右边缘和下边缘显示一些橙色。我推测这些橙色切片是重复的背景图像，好像 Opera 将图像偏移得比它应该的更远。
我创建了a jsfiddle test that demonstrates the issue，您可以在 Opera 中查看它以了解我所描述的不良行为。
关于Opera的详细信息，取自opera:about顶部：
Version information
Version: 12.14
Build: 1738
Platform: Win32
System: Windows 7
Browser identification
Opera/9.80 (Windows NT 6.1; WOW64) Presto/2.12.388 Version/12.14
我已经能够收集到一些可能提供一些线索的信息：
图像越大，偏移越远（即背景位置的值越大），Opera 越出错。
如果元素正好是蓝色方块的大小（在这种情况下为 112 x 112 像素 - 您可以在 jsfiddle 中看到），则 Opera 会正确呈现。
如果（振作起来）图像尺寸是 100 的倍数（即 500 x 500 像素，而不是 560 x 560 像素），Opera 会正确渲染。
目前，我猜这是 Opera 的一个错误，因为它在所有其他浏览器中都可以正常工作。我的问题是：
这是一个合理的假设，还是一个已知问题？ Opera是否违反相关规范？
除了将图像重新渲染为 100 的倍数之外，是否有修复或解决方法？
【问题讨论】：
标签： html css-sprites background-position css