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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist ein bug in Chrom, der code funktioniert einwandfrei in Firefox.
Werden Sie haben zu stick mit absoluten URLs in var() für jetzt.
Dies war ein Fehler, aber es funktioniert jetzt. ?