Освоение CSS3 нескольких фонов

Можно ли переписать такую ​​композицию, используя CSS3 несколько фонов? На самом деле, да, но только если 1) он поддерживается во всех целевых браузерах и 2) продолжить чтение;)

Как мы можем сделать наши многочисленные фоны более динамичными? Внутри браузер разбирает каждое background правило на отдельные правила background-* для каждого из атрибутов. Это очень полезно, если вам нужно изменить только один из атрибутов. Например, вы можете использовать правило background-position для смещения ваших изображений. Но есть некоторые штрафы за работу с несколькими фонами: если вы собираетесь переместить только один слой, вам все равно нужно переписать это правило для всех слоев.

Для анимации нашего морского фона мы можем использовать следующий код JavaScript:

  $ (документ) .ready (function () {
   var sea = $ (". sample5 .sea") [0];
   var fishesX = 30;
   var fishesY = 90;
   var fishX = 0;
   var fishY = 0;
   var mermaidX = 0;
   var t = 0;
 
   function animationLoop () {
       fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0));
       if (- fishesX 480) mermaidX = 0;
       fishY = -10 + (10 * Math.cos (t * 0,091));
       fishX = 10 + (5 * Math.sin (t * 0,07));
 
       sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mermaidX + "px bottom", + fishesX + "px" + fishesY + "px, top left";
 
       window.requestAnimFrame (animationLoop);
   }
   animationLoop ();
 }); 

Где:

  window.requestAnimFrame = (function () {
   возвращение
       window.requestAnimationFrame ||
       window.msRequestAnimationFrame ||
       window.mozRequestAnimationFrame ||
       window.oRequestAnimationFrame ||
       window.webkitRequestAnimationFrame ||
       (function (callback) {window.setTimeout (callback, 1000/60);});
 }) (); 

Результат ( видео ):

Вы также можете использовать CSS3 Transitions или Animations, но это хорошая тема для отдельного обсуждения.

Параллакс и Интерактивность

Наконец, используя аналогичные методы, вы можете легко добавить некоторые эффекты параллакса или другие интерактивные эффекты на свой фон:

Многократные фоны полезны в таких сценариях, и хотя мы говорим только о фонах (не о контенте), их использование, безусловно, является хорошим способом избежать загрязнения HTML-кода сложными ненужными элементами. Но, как я уже сказал, есть некоторые штрафы, если вам нужно создать сложный и динамический фон: вы не можете получить доступ к отдельному слою по ID, классу или любому другому параметру. Вы должны помнить порядок слоев в вашем коде, и чтобы изменить атрибут только для одного слоя, вам нужно будет создать строку, описывающую этот атрибут для всех ваших слоев. Чтобы обновить один слой, вам нужно обновить всю композицию:

  sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mermaidX + "px bottom", + fishesX + "px" + fishesY + "px, top left"; 

Я уверен, что можно создать хорошую и полезную библиотеку JavaScript, которая виртуализирует все эти слои и обеспечит простой способ изменения атрибутов для отдельного слоя, сохраняя чистоту вашего HTML-кода и DOM.

Совместимость

Все современные браузеры, включая IE10 и 9, поддерживают несколько фонов. Вы также можете использовать некоторые инструменты, такие как Modernizr, чтобы обеспечить некоторый уровень совместимости для старых браузеров, например, предоставляя альтернативный фон. Как написал Крис Койер в своей статье о порядке наложения нескольких фонов , вы можете использовать следующий подход:

  .multiplebgs body {
   / * Потрясающие множественные декларации BG, которые выходят за рамки реальности и производят впечатление на цыпочек * /
 }



 .no-multipbgs body {
   / * laaaaaame резервный * /
 } 

Если вас не устраивает использование JavaScript для обеспечения обратной совместимости для новых правил CSS3, вы можете просто определить свойство background дважды (но этот подход может привести к ненужным загрузкам для современных браузеров, в зависимости от того, как они обрабатывают такие правила):

  / * многократный откат BG * /
 фон: # 000 url (...) ...;
 / * Потрясающие множественные декларации BG, которые выходят за рамки реальности и производят впечатление на цыпочек * /
 фон: url (...), url (...), url (...), # 000 url (...); 

И, наконец, если вы хотите это знать: да, вы можете использовать несколько фонов в своих приложениях в стиле Metro для Windows 8, созданных с использованием HTML и JavaScript.

PS Посмотрите эту феноменальную статью Алекса Уокера о принципе цикады.

Заметка
Свойства CSS, обсуждаемые в этой статье, определяются в модуле « Фоны и границы CSS3 », который в настоящее время находится в состоянии «Рабочий чертёж». Между тем, он кажется достаточно стабильным, но все еще может измениться в деталях.