我正在尝试将背景图片固定横幅广告放置到我的网站上。
我使用的代码是
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;
}



但是在移动模式下,它无法正常工作。查看我的网站here

最佳答案

您可以将大小更改为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;
}

09-25 17:16
查看更多