后台附加的替代方法：固定

本文介绍了后台附加的替代方法：固定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

由于background-attachment：fixed在某些移动浏览器（例如，iOS上）上不起作用，因此有什么替代方法，尤其是在尝试实现以下演示时：

Since background-attachment:fixed doesn't work on some mobile browsers (e.g. on iOS), what alternatives are there, specifically when trying to implement the following demo: http://cppforums.ludost.net/test/test.html

CSS：

.sec1 {
  min-height: 1000px;
  background: #222 url('wallpaper-2959361.jpg') no-repeat center top fixed;
}

.sec2 {
  min-height: 1000px;
  background: #222 url('wallpaper-1829278.jpg') no-repeat center top fixed;
}

HTML：

<div class="sec1">text</div>
<h1>Title 1</h1>
<div class="sec2">more text</div>
<h1>Title 2</h1>
<div class="sec1">even more text</div>

关于如何以适用于所有浏览器的方式实施演示的任何建议？最好是仅CSS解决方案。

Any suggestions on how to implement the demo in a way that works on all browsers? Preferably a CSS only solution.

推荐答案

    .bg
    {
      background-image: url(bg.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: -1;
      -webkit-transform: translateZ(0);
      pointer-events: none;
    }

请参见以下示例：

来自：

这篇关于后台附加的替代方法：固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！