如何在手机上为同一部分设置不同的图像背景

Question

我在一个页面网站上工作，我使用 div 为所有部分设置一个背景图片，如下所示：

<div style="background-image: url(./img/12.jpg)" class="sec">
</div>

在 css 我的代码如下：

.sec{
      background-repeat: no-repeat;
      background-size:cover;
     }

一切正常，但手机看起来不太舒服，所以我尝试将不同的背景图像 url 添加到我的 css，但没有像下面这样的运气：

@media only screen and (max-width: 600px) {
.sec{
    background-repeat: no-repeat;
     background-size:cover;
     background-image: url(/img/1255.jpg);
    }
}

我只是想知道我遗漏了哪一部分以及为什么我不能为不同的分辨率提供 2 张不同的图像

Answer 1

您遇到此问题是因为内联 css 覆盖了 internal/external css，请参阅 here。将您的代码更改为

<div class="sec">
</div>

和

.sec{
      background-repeat: no-repeat;
      background-size:cover;
      background-image: url(./img/12.jpg)
     }
@media only screen and (max-width: 600px) {
.sec{
    background-repeat: no-repeat;
     background-size:cover;
     background-image: url(/img/1255.jpg);
    }
}

Answer 2

thr div 中的 style 属性比 CSS 优先，所以这可能就是第二张图片不会出现的原因。最好在 CSS 内全部完成。检查下面的示例。

.sec {
  // You can ignore the height and width
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
}

@media only screen and (max-width: 400px) {
  .sec {
    background-image: url('https://fsb.zobj.net/crop.php?r=TQ17OTvRvqIRq6m-kcLMlU-g68IHkNtXYQ5B3j9twk_CkS6zM7rH_C-OzOS4iVM6pDE9P2fHuo3Swz1_qVGWT7gRAIxzDby0x7rrCtfroFsHSC7aau-HbAFN7i6SGowXNJmowCJGeoUz5S-Uj16rIKacUVpvxTXLR4YhxW2NK_BXHJErHMF1oh7lD4k');
  }
}

<div class="sec"></div>

Answer 3

你可以用同样的方法在移动设备上添加 background-image: url(/img/1255.jpg)!important。

如何在手机上为同一部分设置不同的图像背景

how to set different image background for the same section on mobiles

html

css

media-queries