具有背景图片网址的CSS变量 [英] CSS Variables with background-image url

问题描述

我是否误解了CSS变量的功能？我正在尝试将背景图片的url传递给这样的变量：当我传递诸如颜色等简单的东西时，它似乎工作正常……

Am I misunderstanding the capabilities of css variables? I am trying to pass a background image url to a variable like this: It seems to be working fine when I pass something simple like a color etc...

: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);
}

推荐答案

这是 bug 在Chrome中，该代码在Firefox中可以正常工作。

This is a bug in Chrome, the code works fine in Firefox.

暂时必须在var（）中使用绝对URL。

You'll have to stick with absolute URLs in var() for now.

这篇关于具有背景图片网址的CSS变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！