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

Question

我来这里是为了知道代码出错的地方，我是HTML / CSS的新手并试图加入谷歌但没有运气。

问题：

• 无法根据需要放置图片和文字。
• 当我使用媒体查询时，图片不会替换为移动版本。
• 移动设备的断点大约是819px及以下。

这是我的代码

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我的最终设计应如下所示：

适用于桌面：

适用于移动设备：

Answer 1

div上设置的内联样式会覆盖您在媒体查询中所做的更改。解决这个问题的最简单（但也许不是最干净）的方法是添加一个“重要”的方法。标记到媒体查询中的属性，如：

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

Answer 2

这应该会帮助你，你的css有几个问题。而且我不太确定您为桌面所需的第一张图像是否可以与您为背景提供的内容一致。

＆＃13;

＆＃13;

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

img {
  max-width: 100%;
}

.banner-container {
background-image: url("https://serving.photos.photobox.com/65771836f3f64d3b55f2ce69b7a8e93c69a822788f766366b80f47332a7b4c69dc47e4ef.jpg") !important;
  padding: 150px 0;
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: center right !important;
  .banner-content {
color: #3A1F17;
  }
}



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

＆＃13;

<div class='main-wrapper'>
  <div class="banner-container">
<div class="banner-content">
  <h1>Auto-Delivery</h1>
  <p>NEVER RUN OUT OF YOUR FAVORITE MOROCCANOIL <br>PRODUCTS AGAIN.</p>
</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;