CSS背景属性在iOS设备上不显示

Question

如何在iOS设备上显示CSS背景属性?我可能已经在网上读了所有可用的东西，但没有任何帮助。我没有固定的背景，因为许多帖子都建议删除position:fixed;，我的位置被设置为相对的，因为我在这里有一个白色的覆盖，但即使覆盖和位置被删除，背景仍然不可见。我也尝试了background属性，但仍然相同。

.services {
position: relative;
background-image: url(https://exp-theme.local/wp-content/themes/exp-theme/img/brick-wall-mobile.jpg);
background-position: right;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.key-services:before {
content: '';
width: 100vw;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
opacity: .95;
z-index: 1;
}

背景在除iOS之外的每个设备上都能正确显示。我是不是漏掉了什么?我主要使用Chrome Dev Tools设计这个页面，但一切都很好，只是真正的设备测试显示了到底发生了什么。HTML插入的其他背景都显示得很好。

Answer 1

这不是最干净的解决方案，但是你可以使用一个图像作为背景，它将在safari中工作。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
padding: 1rem;
position: relative;
overflow: hidden;
}
.wrapper img {
position: absolute;
object-fit: cover;
z-index: -999;
inset: 0;
width: 100%;
height: 100%;
}

<div class="wrapper">
<img src="https://picsum.photos/seed/picsum/800/800" />
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button>Click me</button>
</div>

Answer 2

所以这不会工作吗?

.wrapper{
position: relative;
margin: auto;
width: 90%;
background-image: url('https://picsum.photos/seed/picsum/800/800');
background-position: center center;
padding: 2rem;
}
.wrapper::before{
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.0);
transition: all 300ms ease;
}
.wrapper:hover::before{
background: rgba(255, 255, 255, 0.5);
}

<div class="wrapper">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button>Click me</button>
</div>