Проект, над которым я сейчас работаю, позволяет пользователям загружать изображения. Когда изображение загружается, оно динамически добавляется к фоновому изображению div, поэтому я использовал встроенный стиль.

Например:

<div style="background:url('<?=$fleet->bg_img?>') right no-repeat;"></div>

Теперь я не хочу, чтобы это изображение bg отображалось на экранах всех размеров, поэтому я хочу скрыть его на всех экранах шириной менее 870 пикселей. Если бы фоновое изображение было задано как класс, его было бы легко скрыть на небольших устройствах с помощью медиа-запросов. Но потому что я не в тупике, как я должен скрыть это на небольших устройствах?

Есть ли способ быстро скрыть это фоновое изображение, продолжая использовать его как встроенный стиль.

1
jackthedev 9 Июл 2014 в 19:46

4 ответа

Лучший ответ

Вы можете просто использовать медиа-запрос CSS

@media only screen and (max-width: 870px) {
    .myDiv {
        background: none !important;
    }
}

Обычно я не предлагаю использовать !important, но в данном случае это был бы единственный способ переопределить ваш встроенный стиль.

3
Kevin Lynch 9 Июл 2014 в 15:50

Я знаю, что это старая ветка, но для тех, кто ищет решение, вы можете попробовать это вместо !important:

<div style="background:url('<?=$fleet->bg_img?>') right no-repeat;" class="bg-element"></div>

CSS:

.bg-element {
      background-size: 0;
      background-repeat: no-repeat;
}

@media all and (min-width: 870px){
      .bg-element {
          background-size: cover;
      }
}

Использование background-size: 0 приводит к исчезновению фона, а добавление background-repeat: no-repeat делает видимым цвет фона (если он определен) внизу.

А затем в медиа-запросе вы можете просто снова определить размер фонового изображения и сделать его видимым.

Это дает вам гораздо больше свободы, чем использование !important, которое всегда может вызвать проблемы позже, если вы захотите переопределить его.

2
Twoch 10 Май 2019 в 06:16

Почему бы тебе не добавить такой класс, как

<div style="background:url('<?=$fleet->bg_img?>') right no-repeat;" class="user-bg"></div>

А потом

@media (max-width: 870px){
    .user-bg{
        background-image:none !important;
    }
}
0
FalcoB 9 Июл 2014 в 15:51

Пример: http://jsfiddle.net/EgJLK/1/.

HTML

  <div class="imageClass" style="background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhyWPmOb6wqo1AzCfeS2OIgs_wVY08bXwJrl4fvTwNYSWaM2w0T-O7CJwo');"></div>

JQuery / JS

  $(function(){
     $(window).resize(function(){
        if($(window).width() < 870){
            $('.imageClass').css({'background-image': 'none'});
        }else{
            $('.imageClass').css({'background-image': 'url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhyWPmOb6wqo1AzCfeS2OIgs_wVY08bXwJrl4fvTwNYSWaM2w0T-O7CJwo")'})
        }
     });
   });
0
Donald Powell 9 Июл 2014 в 16:05