Question

我有一个自定义属性--src: 'http://via.placeholder.com/100x100'，我想将其插入到背景图片的url（）中。

我认为这样的事情会起作用......

.custom {
  --image: 'http://via.placeholder.com/100x100';
  width: 100px;
  height: 100px;
  background-image: url(var(--src));
}

但事实并非如此。

.custom {
  --image: 'http://via.placeholder.com/100x100';
  width: 100px;
  height: 100px;
   /*  background-image: url('http://via.placeholder.com/100x100');it should look like this */
  background-image: url(var(--image)); /* this doesn't work */
  
}

<div class="custom" style="--image:'http://via.placeholder.com/100x100';">hello</div>

我浏览了https://stackblitz.com/edit/angular-acdcac和url()上的规范，但找不到任何说url（）不支持自定义属性的内容。

只是添加一些关于我为什么要这样做的背景：

我试图在伪元素中添加背景图像以保存额外的元素。（它不起作用）

div:before {
  content: var(--image); /* this works */
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url(var(--image)); /* this doesn't */
}

<div style="--image:'http://via.placeholder.com/100x100';"></div>

这是可能的，还是我错过了什么？

在url数据类型中使用CSS自定义属性

0 个答案: