Блог

Главная - Вопросы по программированию - Несколько фонов: градиенты Moz / Webkit, Т.Е. резервный вариант

Несколько фонов: градиенты Moz / Webkit, Т.Е. резервный вариант

#css

#css

Вопрос:

Да, еще один запасной вопрос 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 использовать обычное правило «фона», не содержащее нескольких элементов, но с параметрами «первая позиция» и «повторить» (внизу, repeat-x). Я пытался просто создать другое фоновое изображение с тем же изображением 3 раза, но это не помогло.

Есть идеи?

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

 .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;
}

Комментарии:

1. Почему бы вам не использовать градиент CSS для фона? Более старые версии будут поддерживать это через свое свойство propriety.

2. Я не знал, что в IE есть проприетарное объявление CSS background gradient, которое будет работать на нескольких фонах.

3. Поиграйте с генератором градиентов ColorZilla .

4. Выглядит интересно, Алекс! Однако, разве это не заменяет фоновое изображение? Я все еще хотел бы, чтобы отображалось мое плиточное изображение. Если мне нужно выбирать между простой градиентной заливкой или плиточным фоном, я выбираю последнее.

5. Вы можете запустить их оба, однако CSS становится немного раздутым.

Ответ №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, но в этом нет необходимости. Прямая линия была достаточно изящной для меня. Также важно поместить условие ПОСЛЕ исходной таблицы стилей, чтобы оно могло правильно «переопределить» то, что было раньше.