Html div image background: HTML Background Images

Базовая страница с div, фон не отображается? — Общие — Форум

DragonDon 27 октября 2015 г., 12:37

1

Хорошо, я должен пропустить что-то очень простое здесь. У меня есть страница, и на этой странице находится DIV. Я установил фоновое изображение для этого DIV, и оно не отображается. Я буквально ничего не делал со своей домашней страницей, и я не вижу фона.

Настройка:

Корпус

• ОТДЕЛ

У меня есть другая страница, которая работает, но она настроена с помощью раздела, и он работает

Тело

• Раздел (фон установлен здесь)
  — Контейнер
  — DIV

http://puu.sh/kZqmZ/85e0602cf6.png
(Обратите внимание на пробел слева)

Итак, я подумал… «Могу ли я добавлять фоновые изображения только в разделы?». Затем я добавил Раздел на страницу и собирался поместить DIV в Раздел, но как только Раздел был добавлен (заметьте, в конец списка элементов!), появился фон DIV!!

http://puu.sh/kZqli/b0faf38730.jpg
(обратите внимание на цвет фона изображения слева)

Кажется, что WebFlow навязывает использование контейнеров, несмотря на то, что базовый body/div является вполне допустимым использованием html .

Ахмадз839 (Ахмад Зафар) 27 октября 2015 г., 13:03

2

Кажется, у меня все работает, можно ли использовать ссылку только для чтения?

ДраконДон 27 октября 2015 г., 14:12

Это был скорее комментарий, чем реальная проблема. Это повторялось на моем сайте.

Вы можете заглянуть на ТЕСТ-страницу, если хотите, чтобы увидеть ее в действии. Как только вы увидите пустую страницу, просто добавьте «раздел» ПОСЛЕ DIV, а затем вы увидите, что он внезапно говорит «о, я сейчас покажу вам этот фон DIV».

https://preview.webflow.com/preview/bjt-daily-ui?preview=629a035a0be5307ac17ef7c518b5a8a5

Ахмадз839 (Ахмад Зафар) 27 октября 2015 г., 14:17

4

Я следовал вашим инструкциям, я разместил раздел после div, вот что получилось: http://nimb.ws/snpjx1.

Ахмадз839 (Ахмад Зафар) 27 октября 2015 г., 14:41

5

@DragonDon

Как вы можете видеть на картинке ниже, я не разместил ни одного раздела на странице, но у div все еще есть фоновое изображение. Ахмад

ДрагонДон 27 октября 2015 г., 15:08

6

Видео показывает только добавление раздела на пустую страницу.

ДраконДон 27 октября 2015 г., 15:11

7

Собственно, чего не хватало, так это 100% высоты по кузову.

Чувак… можно подумать, что если задать 100% высоты DIV, а затем поместить внутрь него картинку, она займет всю высоту картинки… ну ладно.

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

система (система) Закрыто 27 декабря 2015 г., 12:11

8

Эта тема была автоматически закрыта через 60 дней после последнего ответа. Новые ответы больше не допускаются.

Полноэкранные адаптивные изображения только на основе CSS 2 способа

В недалеком прошлом, когда jQuery был королем горы, а CSS3 все еще заслуживал того, чтобы его называли таковым, самым популярным инструментом для адаптивных фоновых изображений был подключаемый модуль Backstretch jQuery. .

Я использовал этот плагин примерно на 30 сайтах до того, как стало больше поддерживаться следующее свойство (то есть доля IE < 9 на рынке упала):

 background-size: обложка; 

Согласно caniuse.com, это свойство и ценность хорошо поддерживаются более 9 лет! Но веб-сайты, которые связаны с использованием Backstretch или другого собственного решения, возможно, еще не обновлены.

Альтернативный метод использует стандартный тег img и использует магию:

 подходит для объекта: крышка; 

Давайте посмотрим, как использовать каждое решение, и узнаем, когда лучше выбрать одно, а не другое.

Использование

#

В течение десяти лет я занимался созданием настраиваемых тем WordPress и плагинов для корпоративных веб-сайтов. Итак, используя пример шаблонных карточек, вот как вы можете настроить использование решения background-size: cover .

Во-первых, HTML, где изображение вставляется в атрибут стиля как фоновое изображение . Рекомендуется использовать aria-label вместо атрибута alt , который обычно присутствует в обычном теге img .

 
 
 
 class="card__img" 
 aria-label="Предварительный просмотр виджета Whizzbang" 
 style="background-image: url(https://placeimg. com/320/240/tech)" 
 >
 
 
 
  
  
Виджет Whizzbang SuperDeluxe
  
 
 
 Лакричные конфеты, миндальное суфле, желейный торт. Конфеты мороженое бисквитно-марципановые. Macaroon 
 пирог с кунжутом и желе. 
 
 
 Добавить в корзину 
 
 
 
 

Соответствующий соответствующий CSS будет следующим, где padding-bottom — это один странный трюк, который используется для установки соотношения 16:9 в div, содержащем изображение:

 .card__img { 
 background-size: обложка; 
 background-position: центр; 
 // соотношение 16:9 
 padding-bottom: 62,5%; 
 } 

Вот это решение целиком:

Стефани Эклз (@5t3ph)

При использовании

#

Это решение является более новым плеером и недоступно для вас, если вам нужна поддержка IE < Edge 16, согласно данным caniuse без полифилла.

Этот стиль размещается непосредственно в теге img , поэтому мы обновляем HTML-код нашей карточки следующим образом, заменяя местами aria-метка от до alt :

 
 
  class="card__img" 
 alt="Предварительный просмотр виджета Whizzbang" 
 src="https://placeimg.com/320/240/tech" 
 /> 
 
 
 
Whizzbang Widget SuperDeluxe
 
 
 
 Лакричные конфеты, миндальное печенье, желейный торт-суфле. Конфеты мороженое бисквитно-марципановые. Macaroon 
 пирог с кунжутом и желе. 
 
 
 Добавить в корзину 
 
 
  

Затем наш обновленный CSS переключается на использование свойства height для ограничения изображения, чтобы изображение любого размера соответствовало ограниченному соотношению. Если собственный размер изображения больше, чем ограниченный размер изображения, свойство

 .