Zmienne CSS z adresem URL obrazu tła

Czy nie rozumiem możliwości zmiennych css? Próbuję przekazać URL obrazu tła do zmiennej tak: Wydaje się, że działa poprawnie, gdy mijam coś prostego jak kolor itp ...Zmienne CSS z adresem URL obrazu tła

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

Źródło

2017-01-19 Sandra Willford

spróbuj po prostu wstawić ścieżkę do zmiennej i użyć jej jako '.jumbotron> .blah {background-image: url (- slide-1); } 'Nie użyłem ich, ale wygląda jak go'er – Dale

Wygląda dobrze dla mnie, ale nie uwzględniono całego kodu ani obrazów roboczych, więc trudno jest powiedzieć, co jest nie tak. Oto demo http://codepen.io/anon/pen/KaWwvz i tutaj [Jak utworzyć przykład minimalny, pełny i sprawdzalny] (http://stackoverflow.com/help/mcve) –

czy próbowałeś użyć zamiast tego absolutna ścieżka? – Roljhon

To bug w Chrome, prace kodu dobrze w Firefoksie.

Na razie musisz trzymać się bezwzględnych adresów URL w var().

Źródło

2017-04-13 23:48:10 user

Zmienne CSS z adresem URL obrazu tła

Odpowiedz

Powiązane problemy