Как использовать свойства поставщика в нескольких фонов?

Question

Я хочу использовать несколько фонов в css, которые в настоящее время поддерживаются Firefox 3.61, Chrome/Safari, предположительно Opera10.5 (не работает на gnu/linux). Он работает нормально, однако я бы хотел использовать линейные градиенты в качестве фона. он работает нормально для Firefox, не работает вообще с Chrome, но я не могу понять, как заставить его работать как для , в то же время. любые подсказки? http://snook.ca/archives/html_and_css/multiple-bg-css-gradients был самым близким к тому, что мне нужно, но я не мог заставить его работать с хромом.

Answer 1

это сработало для меня. кажется, что размещение mozilla после webkit делает webkit подтверждением существования второго параметра для фонового изображения и отменяет его старое объявление. поэтому я помещаю объявление -moz перед -webkit.

 
    background-image: url("../images/block_stripe_bg.png"); /* for older browsers */ 
    background-image: url("../images/block_stripe_bg.png"), -moz-linear-gradient(center top, white, #dddddd); /* works for mozilla, ignored by other browsers */ 
    background-image: url("../images/block_stripe_bg.png"), -webkit-gradient(linear, center top, center bottom, from(white), to(#dddddd)); /* works for webkit, ignored by other browsers */ 
    background-repeat: repeat; /* older browsers */ 
    background-repeat: repeat, no-repeat; /* newer browsers should apply this to both backgrounds*/ 

Answer 2

Я не уверен, но думаю, что хром просто не поддерживает это. Хотя множественные фоновые изображения и градиенты css на одном элементе кажутся вам приятными, я по-прежнему рекомендую использовать несколько элементов с одним фоновым изображением. По какой-то причине все еще есть люди, которые используют IE, который вообще не является CSS3.