如何在页面上保持固定图像，而不受滚动页面的影响？

Question

我想要这个效果 https://flowingbytes.com/REVEALER_DUDA/ 如何实现固定背景效果，使图像在滚动页面时保持在原位？ 如何实现固定背景效果，使图像在滚动页面时保持在原位？ 我不想使用background-attachment：fixed属性，因为它与iPhone和其他浏览器不兼容，并且我希望这种效果在任何设备上看起来都不错。有什么解决方案吗？有什么建议吗？

这是代码：

    <div class="wrapper" id="wrapper">
        <div id="creativity" style="position: relative; width: 300px; height: 600px; overflow: hidden; background-image: url('images/fondo.jpg'); background-size: cover; background-position: center; background-attachment: fixed;">
            <!-- Enlace con Imagen del marco -->
            <a href="https://www.google.com" target="_blank" id="frameLink" style="display: block; position: absolute; top: 0; left: 0; width: 300px; height: 600px; cursor: pointer;">
                <img src="images/marco.png" alt="Marco" id="frameImage" style="width: 100%; height: 100%;">
            </a>
        </div>  
    </div>
    <!-- END CREATIVITY CONTENT -->

我已经完成了您在链接示例中看到的效果，但我想获得没有固定标签的效果。 这是我想要实现的另一个很好的例子： https://demo.teads.com/?content=publishers%2Fteads-tech_english.html&vast=https%3A%2F%2Fs8t.teads.tv%2Fvast%2F6753877076571941&utm_source=showcase&view=mobile&unsupportedDevices=ctv,desktop

Answer 1

.parallax-background {
  position: relative;
  width: 100%;
  height: 600px; /* Set the height as needed */
  overflow: hidden;
}

.parallax-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://static-cse.canva.com/blob/1156550/tools-feature_transparent-image_hero_mobile.2bae9e7e.jpg'); /* Replace YOUR_BACKGROUND_IMAGE_URL with the actual URL of your background image */
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.content {
  position: relative;
  z-index: 1;
  color: #fff; /* Set the text color */
  text-align: center; /* Align the text as needed */
  /* Add any additional text styling as desired */
}

<div class="wrapper" id="wrapper">
  <div id="creativity" class="parallax-background">
    <div class="content">
      <h1>Your Title</h1>
      <p>Your paragraph text goes here.</p>
    </div>
  </div>
</div>

您可以使用视差背景 它与大多数浏览器兼容