Написать личное письмо автору статьи
Фон для блоков
Фон для блоков

Формируя список статей с кратким описанием задался целью для каждой статьи использовать обложку в качестве фона.

Для того чтобы использовать обложку статьи для фона достаточно указать задать background-image: url({{article.get_thumbnail}}), но это вносит ограничение по управлению качеством.

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

Для задания прозрачности фона используется параметр opacity: , но его можно использовать только в css 

.cloud::before {
content: "";       

background-image: url('../images/cloud.png');       

background-size: cover;      

 opacity: 0.3;
}

Следующая проблема. Если параметр background-image: будет находится в файле css, то переменная {{article.get_thumbnail}} вызовет ошибку, т.к. она будет не определена. Если ссылку на css поместить в цикл отображения списка, то во всем списке фоновое изображение будет от последней статьи.

Параметры background-image: url({{article.get_thumbnail}}), opacity: можно задать и указав в div style = "grid-area: 1 / 1; background-color:#ffc10738; opacity: 0.5; background-image: url({{article.get_thumbnail}}):" , но это приведет к распространению значения прозрачности и на остальные элементы дива (текст).

 

Категория: Форматирование / Добавил: zabariap / 24 февраля 2025 г. 15:33
/ Просмотры: 23/ Просмотры за сегодня: 2
Комментарии

Нет комментариев

Форма добавления комментария доступна только авторизованному пользователю.
Похожие статьи
Последние комментарии в разделе Проект
  • Комментариев нет.