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

【问题标题】：Background image as banner and the related text to it query作为横幅的背景图像及其查询的相关文本
【发布时间】：2017-11-14 18:35:14
【问题描述】：

我来这里是为了知道我的代码哪里出了问题，我是 HTML/CSS 新手，正在尝试使用 Google 但没有运气。

问题：

无法根据需要放置图像和文本。
当我使用媒体查询时，图像不会自动替换为移动版本。
移动设备的断点约为 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>

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

台式机：

对于移动设备：

【问题讨论】：

请编辑您的问题以在此处也包含代码。外部链接可能会随着时间的推移而改变或消失，然后在将来这个问题可能没有意义。您还可以在这个问题中制作一个可运行的 StackSnippet，而无需像 JSFiddle 这样的外部站点来制作演示。见stackoverflow.com/help/how-to-ask

标签： html css banner

【解决方案1】：

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

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

【讨论】：

成功了。但我的问题是我使用的文本应该与输出匹配。当我减小屏幕尺寸时，桌面图像也会随着屏幕移动。它应该具有响应性，并且一旦到达断点就应该适应。
图像也应该适合容器。我的图片也放大了，但不应该。

【解决方案2】：

这应该可以帮助您，您的 CSS 存在一些问题。而且我不太确定您为桌面提供的第一张图片是否可以与您为背景提供的图片一起使用。

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

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

【讨论】：