使DIV中的背景图像响应

Question

我希望我的背景图像在div中变得敏感。 滚动时具有视差效果。 我已经尝试在media queries自定义背景但不希望它只调整高度，并且在移动设备宽度时不包含整个页面。 有人能给我一个解决这个问题的线索吗？ 我是html和css的新手。

div的html代码：

<div class="parallax"></div>

css代码：

.parallax { 
    height: 502px;
    background-image: url(../img/back2.png);
    background-attachment: fixed;
    background-position: -70px 80px;
    background-repeat: no-repeat;
    background-size: cover;
}

@media screen and (min-width: 270px) and (max-width: 320px){ 
.parallax { 
    max-height: 300px;
    background-image: url(../img/back2.png);
    background-attachment: fixed;
    background-position: -70px 40px;
    background-repeat: no-repeat;
    background-size: cover;
}
}

Answer 1

你应该使用property： background-size:100% auto;

如果width属性设置为100％，则图像将响应并向上和向下缩放。

请参阅此链接了解更多信息： w3schools