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

Question

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

Answer 1

это сработало для меня. кажется, что размещение mozilla после webkit заставляет webkit признать наличие второго параметра background-image и сбросить его более раннее объявление. поэтому я размещаю объявление -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

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