@qqGrand

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

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

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

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

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

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

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

Войти через центр авторизации
Похожие вопросы