如何删除移动设备的背景 URL答案

【问题标题】：How to remove a background URL for mobile devices如何删除移动设备的背景 URL
【发布时间】：2018-12-06 17:15:32
【问题描述】：

所以我放置了一个背景图像，然后使用引导列在图像上应用文本。

这在桌面上效果很好，但由于响应式设计，深色文本有时会隐藏在图像的深色部分之后。

如何在移动设备上删除背景 URL，以便只显示文本？

我知道这会涉及媒体查询，但我不确定如何隐藏背景图片。

<div class="clearfix" style="background:transparent url(https://questsoft.com/images/default-source/sectionals/products-and-services/instanthmda_billboardc8f999a3366d6c5389a9ff00000118f1.png)no-repeat center center /cover;">
<div class="col-md-6"><br /></div>
<div class="col-md-6"><br />
    <div id="global" style="text-align:left;"><br />
        <p style="font-size:1.2em;">Now available in popular Loan Origination Systems</p>
        <ul>
            <li>Performs an instant check while the loan is being processed</li>
            <li>Corrects Validity and Quality Errors at point-of-contact</li>
            <li>Obtains census tract data with just one click</li>
        </ul><br /></div>
</div>

【问题讨论】：

最好从 css（不是内联）应用背景图像，以便更容易覆盖。有关媒体查询的更多信息：cssmediaqueries.com

标签： html css twitter-bootstrap-3 responsive-design

【解决方案1】：

您可以在媒体查询的帮助下轻松做到这一点，但是您分配样式的方式，即内联 css 更难（在大多数情况下安静地不可能）稍后通过纯 css 删除。因此，首先将样式分配给外部的 div，如下所示：

#content {
  background: transparent url(https://questsoft.com/images/default-source/sectionals/products-and-services/instanthmda_billboardc8f999a3366d6c5389a9ff00000118f1.png) no-repeat center center /cover;
}

然后，使用这样的媒体查询（相应地更改max-width）：

@media only screen and (max-width: 600px) {
  #content {
    background: none;
  }
}

所以，完整的代码是这样的：

#content {
  background: transparent url(https://questsoft.com/images/default-source/sectionals/products-and-services/instanthmda_billboardc8f999a3366d6c5389a9ff00000118f1.png) no-repeat center center /cover;
}

@media only screen and (max-width: 600px) {
  #content {
    background: none;
  }
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="clearfix" id="content">
  <div class="col-md-6"><br /></div>
  <div class="col-md-6"><br />
    <div id="global" style="text-align:left;"><br />
      <p style="font-size:1.2em;">Now available in popular Loan Origination Systems</p>
      <ul>
        <li>Performs an instant check while the loan is being processed</li>
        <li>Corrects Validity and Quality Errors at point-of-contact</li>
        <li>Obtains census tract data with just one click</li>
      </ul><br /></div>
  </div>
</div>

这是 jsfiddle：http://jsfiddle.net/ruz95mef/9/

【讨论】：

【解决方案2】：

正如 Brian 所说，您可以使用 css 媒体查询来删除小于特定尺寸的屏幕的背景 url。

.clearfix {
background: url('images/white-zigzag.png') repeat-x;
}

@media (max-width: 600px) {
.clearfix {
 background-image:none;
 } 
}

【讨论】：

谢谢。这似乎是要走的路。