Как удалить фоновый URL для мобильных устройств - PullRequest
Новая
       6

Как удалить фоновый URL для мобильных устройств

0 голосов
/ 27 июня 2018

Итак, я помещаю фоновое изображение, а затем использую столбцы начальной загрузки, чтобы применить текст к изображению.

Это отлично работает на рабочем столе, но из-за адаптивного дизайна темный текст иногда идет за темными частями изображения.

Как удалить фоновый 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>

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Вы можете легко сделать это с помощью медиазапросов, но способ, которым вы задали стиль, то есть встроенный 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/

0 голосов
/ 27 июня 2018

Как сказал Брайан, вы можете использовать медиа-запрос css, чтобы удалить фоновый URL для экранов меньше определенного размера. 

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

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