javascript - 使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

你应该使用属性:background-size:100% auto;

如果 width 属性设置为 100%，图像将响应并放大和缩小。

请查看此链接了解更多信息:w3schools