Задать фоновое изображение с помощью пользовательских переменных CSS

Я пытался добавить фоновое изображение, используя CSS, используя пользовательские атрибуты HTML. Но согласно этой статье, ценность может быть добавлена ​​только как string независимо от того, какое значение вы передаете (URL, шестнадцатеричный код), как в примере ниже.

div:after
{
    content:attr(data-img);
}
<div data-img="https://via.placeholder.com/200x150">Some text</div>

Но с помощью пользовательских переменных CSS можно установить различные типы свойств, как показано ниже

div
{
    color: var(--elemcolor);
    height: var(--elemsize);
    width: var(--elemsize);
    border: var(--elemborder) solid green;
}
<div style="--elemcolor:#ff0000;--elemsize:50px;--elemborder:5px;">Some text</div>

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

Любая помощь будет оценена.

0 ответов

Другие вопросы по тегам