CSS背景仅在Firefox中向一个方向重复
[英]CSS Background repeat round to one direction only in Firefox
问题描述
I wanted to combine backround-repeat round and repeat-x . 
我想结合使用backround-repeat round和repeat-x 。 On many different web pages I saw that background-repeat: round equals to background-repeat: round round that means Round times repeat to X and round times repeat to Y , isn't it so? 在许多不同的网页上，我都看到background-repeat: round等于background-repeat: round round ，这意味着Round time重复X，而Round time重复Y ，不是吗？ That's why I thought that writing round no-repeat would repeat to one direction only. 这就是为什么我认为round no-repeat写作只会重复一个方向。
My code repeats to all directions. 我的代码向各个方向重复。 I'm using Firefox 30.0 . 我正在使用Firefox 30.0 。
<!DOCTYPE html>
<html>
<body style="background-image: url('bg.png'); background-repeat: round no-repeat">
</body>
</html>
Is it browser specific or should I do other way if there is a way? 它是特定于浏览器的还是如果有办法我应该采取其他方式吗？
3 个解决方案
解决方案1
2 已采纳 2014-07-09 01:07:54
Yes, it should work like you thought. 是的，它应该像您想的那样工作。
The problem is that Firefox doesn't support the value round yet. 问题在于Firefox还不支持价值round 。 Then, the rule is ignored, and the value used is the default repeat . 然后，该规则将被忽略，并且使用的值是默认的repeat 。
You can see browser support in MDN article : 您可以在MDN文章中看到浏览器支持：
- Chrome: no Chrome：否
- Firefox: no ( bug 548372 ) Firefox：否（ 错误548372 ）
- IE: 9 IE：9
- Opera: 10.5 歌剧：10.5
- Safari: no Safari：否
As a workaround, I suggest using a fallback value: 作为一种解决方法，我建议使用一个后备值：
background-repeat: repeat no-repeat; /* fallback for old browsers */
background-repeat: round no-repeat; /* for browsers that support it */
解决方案2
0 2014-07-09 01:09:07
According to the MDN page on background-repeat , and this issue on Bugzilla , background-repeat: round; 根据background-repeat的MDN页面以及Bugzilla上的此问题 ， background-repeat: round; is only supported on IE 9 and Opera. 仅在IE 9和Opera上受支持。 Because Firefox does not recognize the round keyword, it is defaulting to the default background-repeat: repeat; 由于Firefox无法识别round关键字，因此默认情况background-repeat: repeat;使用默认的background-repeat: repeat; . 。
It is not supported in Firefox 30, and it's currently unknown when it will be implemented in Firefox. Firefox 30不支持该功能，目前尚不清楚何时在Firefox中实现它。
解决方案3
0 2014-07-09 01:11:02
It is browser specific since only a couple of browsers do support it. 它是特定于浏览器的，因为只有少数浏览器支持。 My suggestion to work-around is below: I would only use background-repeat:repeat no-repeat . 我的解决方法如下：我只会使用background-repeat:repeat no-repeat 。
As for the "round" vs "round round" this is something we see a lot. 至于“回合”与“回合”，这是我们看到的很多东西。 Let me explain: 让我解释：
If only one argument given eg. 如果只给出一个参数，例如。 "repeat" it applies in all directions. “重复”它适用于所有方向。
If two arguments is given, these defines the X & Y direction eg. 如果给出两个参数，则它们定义了X和Y方向，例如。 "repeat no-repeat" “重复不重复”
the first indicates the x, and the second the y. 第一个表示x，第二个表示y。
If three is given, we have "top", "sides" and "bottom" eg. 如果给定三个，则例如具有“顶部”，“侧面”和“底部”。 "margin: top sides bottom" “边距：顶边底边”
If four, we have "top, right, bottom, left"(clockwise) eg. 如果是四个，则为“上，右，下，左”（顺时针）。 "margin: top right bottom left" “边距：右上左下”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.