web-dev-qa-db-fra.com

Variables CSS avec l'URL de l'image d'arrière-plan

Suis-je mal comprendre les capacités des variables CSS? J'essaie de passer une URL d'image d'arrière-plan à une variable comme celle-ci: Cela semble fonctionner correctement lorsque je passe quelque chose de simple comme une couleur, 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);
}
csscss-variables
15
Sandra Willford

Il s'agit d'un bug dans Chrome, le code fonctionne bien dans Firefox.

Pour l'instant, vous devrez vous en tenir aux URL absolues dans var ().

8
user

C'était un bug, mais ça marche maintenant. ????

0
Maurici Abad