我正在尝试为我的网站制作背景图像固定横幅。我使用的代码是html
<div class="section-1 box text-center">
<h1>WELCOME TO CAR ARENA</h1>
<p><i>THE BEST CAR ACESSORIES ONLINE CART IN KERALA</i></p>
</div>
css
.section-1 {
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url(../images/car.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
但是在移动模式下它不能正常工作。在这里查看我的网站
您可以改为将大小更改为background-size: cover;。这将使图像占据其比例所需的空间。它不会像您在桌面上那样产生效果，因为图像更宽然后更高。
.section-1 {
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url(../images/car.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
我建议您为移动使用调整特定的图像，这意味着使它变窄和变高，然后您可以像这样使用它。
.section-1 {
z-index: -1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-image: url(../images/car-mobile.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
@media screen and (min-width: 767px) {
background-image: url(../images/car.jpg);
background-size: contain;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句