@qqGrand

Как правильно верстать в этом случае?

Привет! Выручайте, пожалуйста. Есть такой макет.
NTWta2m.jpg

Меня интересует как верстать блоки, где фоном картинка.
Я вижу это так, создавать отдельные классы и background'ом ставить изображение.
Или это делается как-то по уму и не нужно лишний раз засорять css?
  • Вопрос задан
  • 174 просмотра
Решения вопроса 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
Если вы делаете безо всякого фреймворка, у вас нет админки, где можно такие блоки создать и на выходе нужные стили будут проставляться хоть inline, хоть через какой-нибудь data-атрибут для JS… то, конечно, либо через классы к каждому блоку, либо через nth-child, либо через inline CSS.

Используя inline-метод без фреймворка, учитывайте вероятные трудности с разработкой адаптивности в случае, если нужно будет двигать фон/менять габариты и т. д.

Я такие блоки делал так: img (+ lazyload, формат JPG) и inline-стиль цвета фона обёртки, чтобы не было пустых областей ни при каких обстоятельствах. Всё это дело обрабатывалось в админке и выводилось на сайте. Можно было использовать background-image спокойно, это уже не так важно.

Если будете делать такой же гибрид (CSS-цвет + JPG с фоном), будьте аккуратны, у JPG могут быть артефакты сжатия из-за которых цвет фона может быть неоднородным, и на стыках может быть разница между картинкой и фоновым CSS-цветом. PNG предпочтительнее в данном плане, но у него есть недостаток в плане размера.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
от 56 000 до 56 000 руб.
Sveak Барнаул
от 50 000 руб.
21 янв. 2019, в 01:19
10000 руб./за проект
20 янв. 2019, в 22:33
30000 руб./за проект
20 янв. 2019, в 22:03
1000 руб./за проект