背景图像不与Safari浏览器从我的手机工作

Question

我上传了我的简单网站，但是当我用safari浏览器从手机上查看时，我看不到顶部的背景图像，我尝试了这个和这个，但都不起作用。

.header {
padding: 10%;
text-align: center;
background: url("4.jpg"); 
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;

height: 82vh;
color: #FFFFFF;
font-size: 2em;
display: flex;
align-items: center;
flex-flow: column;
gap: 1em;

}

<header class="header">
<h1>name surname</h1>
<p>Front End Web Developer</p>
<div class="arrow"><a href="#row"></a></div>
</header>

这是我的网站。谢谢你

Answer 1

手机浏览器已禁用附件功能。

将background-attachment改为background-size: cover

查看更多信息:

如何复制iOS上固定的背景附件

From the post:

查看@ paullirish的评论:

固定背景有巨大的重绘成本和大量的滚动