html - 无法设置响应式 CSS 背景图片的样式

Question

我有一个带有背景图片的 div，它在移动设备上显示不同的图片，但我很难设置图片响应尺寸。目前，我必须手动设置宽度和高度，我正试图避免这种情况。如果我使用 100% 作为宽度和 100% 或自 Action 为高度，图像根本不会显示。

标记:

<div id="mts-popup" class="white-popup mfp-hide wow slideInDown animated" data-wow-duration=".5s">
<h2>MTS Collective</h2>
<div class="left-half">
<div class="popup-screenshot" id="mts-screenshot"></div>
</div>
</div>

CSS:

.white-popup {
  position: relative;
  background: #fff;
  padding: 20px;
  width: 100%;
  max-width: 1160px;
  margin: 30px auto;
  border-radius: 5px;
  text-align: center;
}
.white-popup .left-half, .white-popup .right-half {
  margin: 20px;
}
.white-popup .left-half {
  width: 50%;
  float: left;
}
.white-popup .right-half {
  width: 40%;
}
.white-popup .popup-screenshot {
  width: 600px;
  height: 456px;
  background-size: 100% 100%;
}
.white-popup #mts-screenshot {
  background-image: url("../img/portfolio/mts-browser.png");
}
div#mtsm-popup .left-half {
  width: 30%;
}

非常感谢任何帮助!

Answer 1

因为它没有任何宽度和高度。分配宽度和高度，它将开始显示图像。

  .white-popup #mts-screenshot {
     background-image: url("../img/portfolio/mts-browser.png");
     width:200px;
     height:200px;
  }