带有背景图像url的CSS变量

Question

我是不是误解了css变量的功能？我正在尝试将一个背景图片url传递给一个变量，如下所示:当我传递一些简单的东西时，它似乎工作得很好，比如颜色等等。

:root {
  --slide-1: url(/static/images/slideshow/slide1.jpg) ;
  --slide-2: url(/static/images/slideshow/slide2.jpg) ;
  --slide-3: url(/static/images/slideshow/slide3.jpg) ;
  --slide-4: url(/static/images/slideshow/slide4.jpg) ;
  --slide-5: url(/static/images/slideshow/slide5.jpg) ;
}

//and then

.jumbotron > .jumbotron-slideshow:nth-child(1) { 
  background-image: var(--slide-1); 
}

.jumbotron > .jumbotron-slideshow:nth-child(2) {
  animation-delay: 6s;
  background-image: var(--slide-2);
}

.jumbotron > .jumbotron-slideshow:nth-child(3) {
  animation-delay: 12s;
  background-image: var(--slide-3);
}

.jumbotron > .jumbotron-slideshow:nth-child(4) {
  animation-delay: 18s;
  background-image: var(--slide-4);
}

.jumbotron > .jumbotron-slideshow:nth-child(5) {
  animation-delay: 24s;
  background-image: var(--slide-5);
}

Answer 1

这是Chrome中的bug，代码在火狐中运行良好。

现在，您必须坚持在var()中使用绝对URL。

Answer 2

这是一个bug，但现在它可以工作了。?