Question

我试图在具有可变尺寸的元素上使用背景图像作为精灵。因此，我使用基于百分比的background-size和background-position值。

我在Opera中遇到过这个问题（最新版本，12.14）。我怀疑它是background-position和background-size的组合，基于百分比的值导致了不当行为。我徒劳地搜索了任何相关信息或一个公认的问题。

为了演示我面临的问题，我创建了一个560 x 560像素的图像，主要是橙色，右下角的蓝色方块除外，尺寸为112×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乘500像素，而不是560乘560像素），Opera会正确渲染。

目前，我猜这是Opera的一个错误，因为它在所有其他浏览器中都可以正常工作。我的问题是：

这是一个公平的假设，还是一个已知问题？ Opera是否违反了相关规范？
是否有修复或解决方法，除了将图像重新渲染为100倍的维度？

Answer 1

我将此行为报告给Opera作为＆＃34; bug＆＃34;几个月前，我刚刚在最新版本的opera（17.0）中对此进行了重新测试，并且它正在按预期工作，所以我将假设我的问题的答案如下：

是的，这是一个公平的假设。是的，它违反了一些规范。
是的，您可以更新到最新版本的Opera，其行为符合要求。

作为参考，我从opera://about的顶部再次采取了以前用于测试的Opera的详细信息：

Opera 17.0

Made to discover

Version information

Version:    17.0.1241.45 - Checking for updates...
Update stream:  Stable
System: Windows 7 64-bit (WoW64)
Browser identification

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 OPR/17.0.1241.45

Opera是否错误处理背景位置和/或背景大小与百分比值？

1 个答案: