当我在桌面浏览器中使用background-attachment: fixed
时 CSS.It 工作正常。但不能在手机设备上工作。谁能给我一个想法,让它在手机<</p>
某些手机 - iOS - 由于其性能问题而忽略background-attachment:fixed
您可以改用伪元素来获得相同的效果。我相信这将跨设备工作。
这里有一个教程:https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/
下面是一个基本示例:
* {
padding: 0;
margin: 0
}
body {
position: relative;
}
body:before {
content: ' ';
position: fixed;
/* instead of background-attachment */
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: black;
background: url('https://i.stack.imgur.com/wIzlp.jpg') no-repeat center center;
background-size: cover;
will-change: transform;
/* creates a new paint layer */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
z-index: -1;
}
.card {
line-height: 300px;
text-align: center;
color: #999;
margin: 1em auto;
width: 300px;
height: 300px;
background: rgba(0, 0, 0, .7)
}
<div class="card">
<h1>Sample 1</h1>
</div>
<div class="card">
<h1>Sample 2</h1>
</div>
<div class="card">
<h1>Sample 3</h1>
</div>
<div class="card">
<h1>Sample 4</h1>
</div>
<div class="card">
<h1>Sample 5</h1>
</div>
<div class="card">
<h1>Sample 6</h1>
</div>
<div class="card">
<h1>Sample 7</h1>
</div>
<div class="card">
<h1>Sample 8</h1>
</div>
<div class="card">
<h1>Sample 9</h1>
</div>
在 iOS Safari 上fixed
不起作用。它仅在不使用-webkit-overflow-scrolling: touch
时支持local
。
在安卓浏览器上,它不支持 fixed
,如果元素上设置了border-radius
,它只支持local
。
在设计网站时始终检查浏览器支持,以便您可以立即找到其他解决方案
以下是可以处理后台附件的浏览器:
https://caniuse.com/#feat=background-attachment