Question

当我在CSS中使用background-attachment: fixed时。它在桌面浏览器中工作正常。但不能在移动电话设备上工作。任何人都可以让我有一个想法让它在手机中工作

Answer 1

部分手机 - ios - 由于性能问题而忽略background-attachment:fixed

您可以使用pseudo-elements来获得相同的效果。我相信这将适用于各种设备。

这里有一个教程：https://www.fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property/

这是一个基本的例子：

＆＃13;

* {
  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)
}

＆＃13;

<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>

＆＃13;

Answer 2

在iOS Safari fixed上无法正常工作。它仅在local未使用时支持-webkit-overflow-scrolling: touch。

在Android Chrome 上，它不支持fixed，如果在元素上设置了local，它只支持border-radius。

Answer 3

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

这是可以处理背景附件的浏览器：

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

背景附件不起作用

3 个答案: