如何在html中为固定div创建视差效果答案

【问题标题】：How to create a parallax effect in html for a fixed div如何在html中为固定div创建视差效果
【发布时间】：2017-09-18 23:22:05
【问题描述】：

我创建了一个带有固定侧边栏的 html 页面，该页面也有一个背景图像。我正在尝试将视差效果带入背景图像，但我根本做不到。我尝试将背景附件更改为固定和滚动，但由于 div 是固定的，所以视差效果对我不起作用。请给我一个解决方案。这是我的 CSS 代码。

.header{
    background-image: url("../images/8.jpg");
    background-attachment:scroll;
    height: 100%;
    position: fixed;
    background-size: cover;
    width: 40%;
    background-repeat: no-repeat;
    margin: 0;
    padding-left: 20px;
    font-family: 'Asap Condensed';
    font-size: 50px;
    padding-top: 100px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }

【问题讨论】：

您可能应该使用 Javascript 来获得实际的视差效果（我假设您希望获得不同的滚动速度）。如果您真的不想使用任何内容，可以查看本教程以获得纯 css 视差效果：keithclark.co.uk/articles/pure-css-parallax-websites 请记住，本教程是一种实验性的。

标签： html css

【解决方案1】：

这是来自W3Schools 使用background-attachment: fixed; 技术的一个很好的例子：

<style>
.parallax { 
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

<!-- Container element -->
<div class="parallax"></div>

【讨论】：

不，它不会在你上传的代码中，但你应该能够将它放在另一个div中，并且只给一个div提供视差效果。