CSS-Variablen mit background-image url

Bin ich Missverständnis der Möglichkeiten von css-Variablen? Ich bin versucht, übergeben Sie einen hintergrund-Bild-url in eine variable wie folgt: Es scheint zu funktionieren gut, wenn ich den pass etwas einfaches wie eine Farbe 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);
}
  • versuchen Sie einfach, setzen Sie den Pfad in eine variable, und verwenden Sie es als .jumbotron > .blah { background-image: url(--slide-1); } ich habe Sie nicht genutzt, sieht aber wie ein go ' er
  • Sieht gut zu mir, aber Sie hat nicht alle Ihre code oder arbeiten-Bilder, also es ist schwer zu sagen, was falsch ist. Hier ist eine demo - codepen.io/anon/pen/KaWwvz und hier so erstellen Sie eine Minimale, Vollständige und Überprüfbare Beispiel
  • haben Sie versucht, mit einem absoluten Pfad statt?
  • das hat es, muss nicht sein, da der Pfad Recht danke!
  • Ein guter Weg, um Debuggen zu beginnen ist mit der einfachste! Goodluck buddy! 🙂
  • Hinweis: CSS-Variablen ist nicht implementiert Edge oder IE nach caniuse.com
  • Ich bin vor dem gleichen problem. Hast du es geschafft, Sie zu passieren, ohne Angabe der domain in der url?
  • beantwortet.

Schreibe einen Kommentar