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

Question

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

Например:

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

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

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

html css responsive-design

1

jackthedev 9 Июл 2014 в 19:46

Answer 1

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

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

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

3

Kevin Lynch 9 Июл 2014 в 19:50

Да, я не был уверен в использовании !important, но он отлично работает, не прибегая к JS. Спасибо за ответ!

–

jackthedev

9 Июл 2014 в 20:15

Answer 2

Я знаю, что это старая ветка, но для тех, кто ищет решение, вы можете попробовать это вместо !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 в 09:16

Answer 3

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

<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 в 19:51

Answer 4

Пример: 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 в 20:05

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

4 ответа

Похожие вопросы

Новые вопросы

html