3

我正在尝试在具有可变尺寸的元素上使用背景图像作为精灵。因此，我对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 已经将图像偏移得比它应该的更远。

我创建了一个 jsfiddle 测试来演示该问题，您可以在 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 的倍数之外，是否有修复或解决方法？

4

1 回答 1

1

几个月前我将这种行为作为“错误”报告给 Opera，我刚刚在最新版本的 Opera（17.0）中重新测试了它，它按预期工作，所以我假设我的问题的答案是如下：

  • 是的，这是一个公平的假设。是的，它违反了某些规范。
  • 是的，您可以更新到最新版本的 Opera，它的行为如您所愿。

作为参考，关于我刚刚测试过的 Opera 的详细信息，再次从顶部获取opera://about：

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
于 2013-10-11T06:15:49.640 回答