背景不会在移动浏览器上重复

Question

我使用2个背景，一个作为图像而不重复，第二个在x和y轴重复。 在PC上一切正常，但在移动浏览器上，第二个图像仅在x轴上重复。 这是我的CSS代码

    #bdy
   {   
    direction: rtl;
    width: 1200px;
    margin: 0 auto;
    background: url(img/bg1.png),url(img/bg.png);
    background-repeat: no-repeat,repeat;
    background-position:  center  -70px   ,  top ;
   }

那么，我应该改变什么才能让它在x和y上重复？

Answer 1

如果您希望背景在X和Y上重复，则应仅使用background-repeat: repeat;，因为默认情况下它会在两个轴上重复。

修改 好的，我进行了一些研究，发现并非所有浏览器都支持这种形式：background: url(img/bg1.png),url(img/bg.png);喜欢，IE8不支持多种背景。 所以，我的建议是使用多个div或标签，并为您的网站制作单独的移动版本。对于我的网站，我使用这段代码：

<script>if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {window.location ="MOBILE-DOMAIN-NAME-HERE";}</script>

将用户重定向到我网站的移动版本。现在，对于多个div，你可以做这样的事情：

<强> HTML

<div id="bg1"> content </div>
<div id="bg2"> content </div>

<强> CSS

#bg1{
background: url(img/bg1.png);
background-repeat: no-repeat;
background-position:  center  -70px;
}

#bg2{
background: url(img/bg.png);
background-repeat: repeat;
background-position: top;
}