Question

我希望合并backround-repeat round和repeat-x。在许多不同的网页上，我看到background-repeat: round等于background-repeat: round round，这意味着圆形时间重复到X，圆形时间重复到Y ，是不是这样？这就是为什么我认为写作round no-repeat只会重复一个方向。

我的代码向所有方向重复。我使用Firefox 30.0。

<!DOCTYPE html>
<html>
<body style="background-image: url('bg.png'); background-repeat: round no-repeat">
</body>
</html>

是否有特定浏览器，或者如果有办法，我应该采取其他方式吗？

Answer 1

是的，它应该像你想的那样工作。

问题是Firefox还没有支持值round。然后，该规则将被忽略，使用的值为默认值repeat。

您可以在MDN article中看到浏览器支持：

Chrome：否
Firefox：否（bug 548372）
IE：9
Opera：10.5
Safari：没有

作为解决方法，我建议使用后备值：

background-repeat: repeat no-repeat; /* fallback for old browsers */
background-repeat: round no-repeat;  /* for browsers that support it */

Demo

Answer 2

根据the MDN page on background-repeat和this issue on Bugzilla，只有IE 9和Opera支持background-repeat: round;。由于Firefox无法识别round关键字，因此默认为默认background-repeat: repeat;。

Firefox 30不支持它，当它在Firefox中实现时，目前还不知道。

Answer 3

这是浏览器特定的，因为只有几个浏览器支持它。我的解决方案建议如下：我只会使用background-repeat:repeat no-repeat。

至于＆＃34; round＆＃34; vs＆＃34; round round＆＃34;这是我们经常看到的东西。让我解释一下：
如果只给出一个参数，例如。＆＃34;重复＆＃34;它适用于所有方向。

如果给出两个参数，则这些参数定义X＆amp; Y方向，例如。＆＃34;重复不重复＆＃34;
第一个表示x，第二个表示y。

如果给出三个，我们有＆＃34; top＆＃34;，＆＃34; sides＆＃34;和＆＃34;底部＆＃34;例如。＆＃34;保证金：顶部底部＆＃34;

如果是四个，我们有＆＃34;顶部，右侧，底部，左侧＆＃34;（顺时针）例如。＆＃34;保证金：右上角左下角＆＃34;

CSS背景仅在Firefox中向一个方向重复

3 个答案: