使用CSS自定义变量设置背景图片

时间:2018-06-29 10:41:57

标签: html css custom-attribute

我试图通过访问HTML自定义属性来使用CSS添加背景图片。但是根据this article,无论您传递的值(URL,十六进制代码)如何,该值只能作为string添加,如下例所示。

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 个答案:

没有答案