Формируя список статей с кратким описанием задался целью для каждой статьи использовать обложку в качестве фона.
Для того чтобы использовать обложку статьи для фона достаточно указать задать 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
Нет комментариев