Как вставлять картинки через код css?

Question

[Redel Reiz]

Помогите, пожалуйста, реализовать способ вставки картинки в css файле.

Все обложки, аватары аккаунтов и альбома берутся из папки upload, которые в свою очередь загрузил пользователь, чтобы не прописывать полный путь до картинки есть такой код или переменная (я пока не знаю точно, как этот код называется){{thumbnail}}
Я прописываю так в html

<img src="{{thumbnail}}" class="card-img h-100 scale shadow-deep" alt="card image" />

Тем самым я подхватил картинку с нужным мне ID

Подскажите, пожалуйста, как мне в css прописать правильно этот код
{{thumbnail}}

Мой пример в файле css:
background-image: url({{thumbnail}});

Мне нужно именно блоку дать картинку.
Мой способ нерабочий.

Answer 1

[alexalexes]

Вы пытаетесь работать с CSS как с шаблоном - для этого нужно использовать препроцессор CSS такие как Sass, Stylus, Less.
Если у вас учебный проект, то это отдельная глава или даже раздел для набивания навыков и шишек.
Если проект боевой и довольно простой, то можно не ввязываться в дебри динамической генерации стилей, условится, что статичные свойства стилей вы записываете в файлах CSS, а динамические - в html вставками:

<style>
  .user-114__avatar
{
   background-image: url({{thumbnail}});
}
</style>
...
<!-- какие-то общие стили для аватара прописаны в классе user__avatar в файле css, а изменяемые прямо в HTML-->
<div class="user__avatar user-114__avatar">
</div>

или инлайн-стилями:

<!-- какие-то общие стили для аватара прописаны в классе user__avatar в файле css, а изменяемые прямо в инлайн-атрибуте тега-->
<div class="user__avatar" style="background-image: url({{thumbnail}});">
</div>

PS: Тег img некорректно использовать без src, фон в нем может выступать только дополняющим свойством, например, закрывать прозрачные участки картинки src. И с фоновым изображением придется работать по-другому, чтобы привести в порядок адаптивность элемента.

Comments

[Redel Reiz]

Подскажи пожалуйста почему когда я применяю градиент на фотографию получается вот так?


Если посмотреть то видно что по кроям есть блоки которые не заполнились фотографией
Делал инлайн-стилями вот так:

<div class="card h-100 rounded hover-border-primary alert-ima" style="background: linear-gradient(-150deg,rgba(0, 0, 0, 0) 0, var(--quaternary) 100%), url('{{s_thumbnail}}') 0 0 no-repeat;">

Подскажи пожалуйста решение?

[alexalexes]

Потому, что линейный градиент в CSS изменяется по ширине всего div блока, а градиент на картинке - по ширине картинки. Разная скорость перетекания цвета, поэтому неизбежен разрыв оттенков слева и справа.
Тут можно слева и справа заполнять двумя разными фонами - цветом самой левой границы рисунка слева и справа - цветом самой правой границы (или даже отрезать как-то текстуру шириной 1px и ей мостить); либо от этих цветов делать стартовый цвет для градиентов слева и справа.
Вопрос лишь в том, как вычислить цвет или отрезать текстуры слева и справа в рисунке.

[Redel Reiz]

alexalexes, Спасибо. Решил переместить эту область в правую сторону блока, и залить её гралиентом, вроде работает.
Спасибо что откликнулся!