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