css - Bootstrap - 不同断点的不同图像背景......错误在哪里？

Question

我想在每个设备上显示两个不同的背景图像，有一个代码，但它不能正常工作......

bug在哪里？

@media (max-width: 720px) {
  body {
    margin: 0;
    background-color: #ff0000;
    background-image: url('img/bg1.jpg');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% auto;
  }
}

@media (min-width: 721px) {
  body {
    margin: 0;
    background-color: #303441;
    background-image: url('img/bg2.jpg');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% auto;
  }
}

Answer 1

检查您的第一张图片的路径。我的图像可以正常工作。

我同意 Dan Weber ，代码可以简化:

body {
  margin: 0;
  background-color: #ff0000;
  background-image: url('http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% auto;
}

@media (min-width: 721px) {
  body {
    background-color: #303441;
    background-image: url('http://glebkema.ru/images/2015_09_26_iphone_198_x400.jpg');
  }
}