html - 作为横幅的背景图像及其查询的相关文本

Question

我来这里是为了知道我的代码哪里出了问题，我是 HTML/CSS 的新手，正在尝试谷歌，但没有成功。

问题:

• 无法根据需要放置图片和文字。
• 当我使用媒体查询时，图片没有用移动版本替换自己。
• 对于移动设备，断点大约为 819 像素及以下。

这是我的代码

.main-wrapper {
  max-width: 1300px;
}

img {
  max-width: 100%;
}

.banner-container {
  padding: 150px 0;
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: center right !important;
  .banner-content {
    color: #3A1F17;
  }
}

@media (max-width: 819px) {
  .banner-container {
    background-image: url("https://serving.photos.photobox.com/00758490381c3770325173d6abe930e9148d8f0582ad2407e9e775d8fe03b471331704e1.jpg") !important;
  }
  .banner-content {
    text-align: center;
  }
}

<div class='main-wrapper'>
  <div class="banner-container" style="background: url('https://serving.photos.photobox.com/65771836f3f64d3b55f2ce69b7a8e93c69a822788f766366b80f47332a7b4c69dc47e4ef.jpg')">
    <div class="banner-content">
      <h1>Auto-Delivery</h1>
      <p>NEVER RUN OUT OF YOUR FAVORITE MOROCCANOIL <br>PRODUCTS AGAIN.</p>
    </div>
  </div>
</div>

我的最终设计应该是这样的:

对于桌面:

对于移动设备:

Answer 1

在 div 本身上设置的内联样式会覆盖您在媒体查询中所做的更改。解决此问题的最简单(但可能不是最干净)的方法是向媒体查询中的属性添加一个 '!important' 标志，如下所示:

background-image: url(<url>) !important;