Question

我已经有了这个网站我正在努力，试图让它响应，所以我有一个div ID，一旦移动设备满足一定宽度就出现，这里是CSS

#mobilenavbuttons1 {
max-width: 750px;
padding-top: 20%;
height:0;
background: url("../../../images/productcatalog.jpg") repeat-x 0 0 / 100% auto rgba(0, 0, 0, 0);
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;  
padding-bottom:3px;
margin-bottom:4px;
text-align: center;
color: #fff;
}

此按钮显示在每个浏览器中，甚至是chrome，但是当我在safari中打开它时，它只是空的位置。我尝试在safari中使用调试工具，当我看一下调试器的样式部分时，我甚至看不到正在加载的图像背景。

我已经在Stackoverflow上阅读了大量文章和帖子，但没有一个解决方案有效。我尝试过png，gif，引号，没有引号（图片周围），甚至将背景大小放在另一条线上，而不是与图像在同一个调用中，没有任何效果。有什么想法吗？

Answer 1

想出一个解决方案，我认为它与我在一行上编写它的反斜杠/格式有关。这可以解决问题：

#mobilenavbuttons1 {
display: none;
max-width: 750px;
padding-top: 20%;
height:0;
background: url("../../../images/productcatalog.jpg") rgba(0, 0, 0, 0);
background-size: 100% auto;
background-repeat: repeat x 0 0;
padding-bottom:3px;
margin-bottom:4px;
text-align: center;
color: #fff;
}

CSS背景图像和Safari不能很好地播放，甚至不会出现在调试器中

1 个答案: