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

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"); /* для старых браузеров */
  background-image: url("../images/block_stripe_bg.png"), -moz-linear-Gradient(центральная вершина, белый, #dddddd); /* работает для mozilla, игнорируется другими браузерами */
  background-image: url("../images/block_stripe_bg.png"), -webkit-градиент (линейный, центральный верх, центральный низ, от (белого) до (#dddddd)); /* работает для webkit, игнорируется другими браузерами * /
  повторение фона: повторение; /* старые браузеры * /
  повторение фона: повтор, без повтора; /* новые браузеры должны применять это к обоим фонам * /

Answer 2

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