2017-01-19 7 views
6

Bin ich die Fähigkeiten von CSS-Variablen missverstehen? Ich versuche, ein Hintergrundbild URL zu einer Variablen wie folgt zu passieren: Es scheint zu funktionieren gut, wenn ich etwas Einfaches wie eine Farbe, etc. passieren ...CSS-Variablen mit Hintergrund-Bild-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); 
} 
+0

versuchen Sie einfach den Pfad in Ihre Variable und verwenden Sie es als '.jumbotron> .blah {background-image: url (- slide-1); } 'Ich habe sie nicht benutzt, aber sie sieht wie ein Go'er aus. – Dale

+0

Sieht gut aus, aber Sie haben nicht all Ihren Code oder Ihre Arbeitsabbilder hinzugefügt, so dass es schwer ist zu sagen, was falsch ist. Hier ist eine Demo http://codepen.io/anon/pen/KaWwvz und hier ist [Wie erstellt man ein minimales, komplettes und überprüfbares Beispiel] (http://stackoverflow.com/help/mcve) –

+1

haben Sie versucht, ein absoluter Pfad stattdessen? – Roljhon

Antwort

5

Dies ist ein bug in Chrome, der Code funktioniert gut in Firefox.

Sie müssen für jetzt mit absoluten URLs in var() bleiben.