Переменные CSS с фоном-изображение url

Я не понимаю возможности переменных css? Я пытаюсь передать URL фонового изображения переменного, как это: Это, кажется, работает хорошо, когда я прохожу что-то простое, как цвет и т.д. ...Переменные CSS с фоном-изображение 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); 
}

источник

2017-01-19 Sandra Willford

попробуйте просто поместить путь в вашу переменную и использовать его как '.jumbotron> .blah {background-image: url (- slide-1); } 'Я не использовал их, но выглядел как go'er – Dale

Выглядит хорошо, но вы не указали весь свой код или рабочие образы, поэтому трудно сказать, что не так. Вот демо http://codepen.io/anon/pen/KaWwvz и вот [Как создать минимальный, полный и проверенный пример] (http://stackoverflow.com/help/mcve) –

Вы пытались использовать абсолютный путь вместо этого? – Roljhon

Это в Chrome bug, код работает отлично в Firefox.

В настоящее время вам придется придерживаться абсолютных URL-адресов в var().

источник

2017-04-13 23:48:10 user

Переменные CSS с фоном-изображение url

ответ

Смежные вопросы