后台连接不起作用



当我在桌面浏览器中使用background-attachment: fixed时 CSS.It 工作正常。但不能在手机设备上工作。谁能给我一个想法,让它在手机<</p>

div class="one_answers"中工作>

某些手机 - 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 Safarifixed不起作用。它仅在不使用-webkit-overflow-scrolling: touch时支持local

在安卓浏览器上,它不支持 fixed ,如果元素上设置了border-radius,它只支持local

在设计网站时始终检查浏览器支持,以便您可以立即找到其他解决方案

以下是可以处理后台附件的浏览器:

https://caniuse.com/#feat=background-attachment

最新更新