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

Question

我创建了一个带有固定侧边栏的 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);
  }

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