Несколько фонов: градиенты Moz / Webkit, IE откат

Question

Да, еще один запасной вопрос для IE.;-) Я взглянул на остальных здесь, в SO, и большинство из них не были предназначены для нескольких фонов.

IE <9 не поддерживает несколько фонов, в то время как IE> =9 делает.В обоих случаях я прекрасно, даже не имея их «несколько», а просто заставляя их просто использовать изображение для отступления.

Вот мой существующий CSS:

.main_accent { 
  background-image: url('../img/background.png');
  background-repeat: repeat;
  background-image: url('../img/fringe.png'), -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)), url('../img/background.png');
  background-image: url('../img/fringe.png'), -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0,0,0,0.9)), url('../img/background.png');
  background-position: bottom, center, center;
  background-repeat: repeat-x, no-repeat, repeat;
  padding-bottom: 40px;
}

Первое фоновое изображениеи повторить объявление для старых браузеров.Затем выполняется объявление с несколькими фоновыми изображениями для Webkit и для Mozilla.Они работают хорошо, вместе с сопровождающим их положением и повторяются.

«Изображения» должны быть в таком порядке, потому что сначала заполняется плитка, а затем накладывается градиент, затем нижняя «бахрома»(аналогично эффекту пигментных ножниц, который мы все видели) завершается снизу.

Проблема в том, что в IE9 или выше поддерживаются несколько фонов, но префиксы вендоров, конечно, игнорируются.Это заставляет IE9 + использовать простое немультимедиальное «фоновое» правило, но с первой позицией и параметрами повтора (bottom, repeat-x).Я пытался просто использовать другое фоновое изображение с тем же изображением 3 раза, но это было бесполезно.

Любые идеи?

[update:] использовал сокращение, но все же не повезло.IE хочет использовать этот повтор-х внизу независимо от:

.main_accent { 
  background: url('../img/background.png') repeat;
  background: url('../img/fringe.png') repeat-x bottom, -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)) no-repeat center, url('../img/background.png') repeat center;
  background: url('../img/fringe.png') repeat-x bottom, -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0,0,0,0.9)) no-repeat center, url('../img/background.png') repeat center;
  padding-bottom: 40px;
}

Answer 1

Ну что ж, вот что я в итоге сделал:

#wrapper > .container:first-child { 
  background: #69000c url('../img/background.png') repeat;
  background: url('../img/fringe.png') repeat-x bottom, -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)) no-repeat center, url('../img/background.png') repeat center;
  background: url('../img/fringe.png') repeat-x bottom, -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0,0,0,0.9)) no-repeat center, url('../img/background.png') repeat center;
  background: url('../img/fringe.png') repeat-x bottom, -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%), url('../img/background.png') repeat center; /* Opera 12+ */
  background: url('../img/fringe.png') repeat-x bottom, -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%), url('../img/background.png') repeat center; /* IE10+ */ 
  padding-bottom: 40px;
}

Я не сделал исключения для IE с точки зрения фильтра. Браузеры MS, которые поддерживают стандартные объявления и свойства радиального градиента (готовящийся к выпуску IE10), будут в порядке. Иначе я не нашел более умного варианта, чем хорошие старые условия:

<!--[if lte IE 9]>
  <style type="text/css">
#wrapper > .container:first-child {
    background: #69000c url('/wp-content/themes/roots/img/background_darker.png') repeat;
}
  </style>
<![endif]-->

Поскольку мой радиальный градиент затемняет вещи значительно, я сделал новый рисунок мозаики, который стал все темнее. Это было предпочтительнее, чем «базовый» шаблон мозаики, который был слишком ярким при простом мозаике.

В IE9 или меньше я, очевидно, тоже не беспокоюсь о "бахроме". Может сделать это с дополнительным div, но это не обязательно. Прямая линия была достаточно изящна для меня. Также важно поместить условное ПОСЛЕ оригинальной таблицы стилей, чтобы она могла корректно «переопределить» то, что было раньше.