Question

我有以下CSS设置背景图片，但是在Safari中不起作用。它甚至不设置背景色，即使那是一个备用。我无法在Windows上安装Safari，因此甚至无法对其进行测试！

.oops-body {
    background: url('/img/oops-bg.jpg') center/cover no-repeat #1b1d37;
    min-height: 100vh;
    overflow: hidden;
}

和HTML

<body>
<div class="oops-body">
</div>
</body>

.oops-body {
	background: url('http://placehold.it/500') center/cover no-repeat #1b1d37;
	min-height: 100vh;
	overflow: hidden;
}

<div class="oops-body">
 </div>

这是使用Safari的同事的屏幕截图：

顺便说一句，它可以在移动Safari中正常运行。我在iPhone上进行了测试。

Answer 1

您可以尝试一下吗

background-image: url("http://placehold.it/500");
background-repeat: no-repeat;
background-position: center top;

不仅仅是使用background。

Answer 2

以此替换您的background CSS

{
   background-image: url("image.png");
   background-repeat: no-repeat;
   background-attachment: fixed;
   -o-background-size: cover;
   -moz-background-size: cover;
   -webkit-background-size: cover;
}

Safari中未显示CSS背景图片

2 个答案: