При использовании нескольких фоновых изображений и том условии, что это PNG-файлы со свойством прозрачности, любые частично прозрачные фоновые изображения, находящиеся выше других изображений, позволят просматривать то, что находится под ними. Но фоновые изображения не обязательно должны наслаиваться друг на друга и не обязательно должны быть одного и того же размера.
Размер фона
Чтобы установить для каждого изображения различные размеры, нужно воспользоваться свойством background-size. При использовании нескольких изображений синтаксис работает следующим образом:
.bg {
background-size: 100% 50%, 300px 400px, auto;
}
Здесь в том порядке, в котором изображения перечислены в свойстве background, указаны значения размеров каждого изображения (сначала ширина, а затем высота), отделенные друг от друга запятыми. Как и в том примере, который приведен ранее, для каждого изображения можно использовать значения, выраженные как в процентах, так и в пикселах, и кроме этого, можно воспользоваться следующими ключевыми словами:
• auto — задает естественный размер элемента;
• cover — расширяет изображение, сохраняя соотношение его сторон, чтобы занять всю площадь элемента;
• contain — расширяет изображение таким образом, чтобы оно поместилось внутри элемента по своей самой длинной стороне с сохранением соотношения сторон.
Позиция фона
Если имеются различные фоновые изображения с отличающимися размерами, далее может потребоваться указать для них разные позиции. К счастью, с этой задачей вполне может справиться свойство background-position.
Объединим в одно целое все возможности указания фоновых изображений, а также воспользуемся некоторыми установками для адаптируемых конструкций, рассмотренными в предыдущих главах.
Создадим простую космическую сцену из одного элемента и трех фоновых изображений, для которых устанавливаются три различных размера и задаются совершенно разные позиции:
.bg-multi {
height: 100vh;
width: 100vw;
background:
url('rosetta.png'),
url('moon.png'),
url('stars.jpg');
background-size: 75vmax, 50vw, cover;
background-position: top 50px right 80px, 40px 40px, top center;
background-repeat: no-repeat;
}
В браузере мы увидим картинку, похожую на эту.
В нижнем слое будет звездное небо, поверх него — луна, и, наконец, в самом верхнем слое — космический зонд «Розетта». Самостоятельно вывести картинку на экран можно, запустив файл из каталога example_06-06. Обратите внимание на то, что при изменении размеров окна браузера адаптивные единицы измерения (vmax, vh и vw) срабатывают довольно четко, сохраняя пропорции, чего нельзя сказать о тех изображениях, для которых в качестве единицы измерения использовались пикселы.
примечание
Если значения для свойства background-position не указывались, то по умолчанию применяется позиция в левом верхнем углу.
Краткий метод записи фона
Существует краткий метод записи, объединяющий различные свойства настройки фона. Соответствующую спецификацию можно найти по адресу http://www.w3.org/TR/css3-background/. Но пока что мой опыт мне подсказывает, что данный метод выдает ошибочные результаты. Поэтому я рекомендую пользоваться развернутым методом записи и сначала объявлять несколько изображений, затем размеры, а за ними — позиции.
примечание
Документацию W3C, относящуюся к нескольким фоновым элементам, можно найти по адресу http://www.w3.org/TR/css3-background/.
Фоновые изображения с высоким разрешением
Благодаря медиазапросам у нас есть возможность загружать различные фоновые изображения не только для различных размеров окон просмотра, но и для различных разрешений этих окон. Например, вот как выглядит официально утвержденный способ указания фонового изображения для нормального экрана и для экрана с высоким показателем dpi. Этот код можно найти в файле каталога example_06-07:
.bg {
background-image: url('bg.jpg');
}
@media (min-resolution: 1.5dppx) {
.bg {
background-image: url('[email protected]_5x.jpg');
}
}
Медиазапрос составляется точно так же, как и раньше, с проверкой ширины, высоты или любой другой характеристики. В данном примере определен минимальный показатель разрешения, при котором должно использоваться изображение [email protected]_5x.jpg, составляющее 1.5dppx (количество пикселов устройства, приходящихся на один пиксел CSS). При желании можно также использовать такие единицы измерения, как dpi (количество точек на дюйм) или dpcm (количество точек на сантиметр). Я считаю, что проще всего осмыслить единицу измерения dppx, невзирая на ее более слабую поддержку, поскольку, к примеру, 2dppx означает удвоенное разрешение, а 3dppx — утроенное. Разобраться в разрешении, выраженном в dpi, намного сложнее. Стандартным считается разрешение 96dpi, удвоенное разрешение выражается значением 192dpi и т. д.
Пока поддержка единицы измерения dppx не слишком широка (ее наличие в тех браузерах, на которые рассчитано ваше устройство, можно проверить на сайте http://caniuse.com/), поэтому, чтобы все это работало повсеместно с приемлемым результатом, требуется создать несколько версий медиазапросов в отношении разрешения или положиться на средство, расставляющее нужные префиксы производителей.
Краткое замечание по поводу производительности
Следует помнить, что большие изображения потенциально могут снизить наблюдаемую скорость работы сайта, что приведет к ухудшению пользовательского восприятия. Хотя фоновые изображения не заблокируют вывод страницы на экран (ожидая загрузки, вы по-прежнему будете наблюдать на экране прорисовку всего остального сайта), они поспособствуют существенному общему утяжелению страницы, что немаловажно, если пользователям приходится платить за принятый объем данных.
CSS-фильтры
У свойства box-shadow есть одна вполне очевидная проблема. В соответствии с названием его работа ограничена принятой в CSS прямоугольной формой блока, к которому оно применяется. Вот как выглядит копия экрана треугольника, полученного с помощью CSS, с примененной к нему тенью блока (код можно найти в каталоге example_06-08).
Я же надеялся получить другой результат. К счастью, этот недочет можно обойти с помощью CSS-фильтров, являющихся частью спецификации Filter Effects Module Level 1 (http://www.w3.org/TR/filter-effects/). Они не пользуются такой же широкой поддержкой, как box-shadow, но отлично работают при использовании подхода, предусматривающего постепенное улучшение качества вывода на экран. Если браузер не понимает, что ему нужно делать с фильтром, он его просто проигнорирует. А для тех браузеров, которые его поддерживают, на экран выводятся просто фантастические эффекты.
Вот тот же самый элемент с CSS-фильтром drop-shadow, примененным вместо box-shadow.
Формат CSS-фильтров имеет следующий вид:
.filter-drop-shadow {
filter: drop-shadow(8px 8px 6px #333);
}
После свойства filter указывается тот фильтр, который нужно применить, в данном примере это drop-shadow, а затем передаются аргументы для фильтра. Для drop-shadow используется такой же синтаксис, как и для box-shadow, поэтому разобраться в нем довольно просто: смещение по осям X и Y, размытие, затем радиус протяженности (оба этих параметра являются необязательными) и, наконец, цвет (указывать его также не обязательно, хотя в целях совместимости я все же рекомендую от этого не отказываться).
совет
Фактически CSS-фильтры основаны на SVG-фильтрах, обладающих более широкой поддержкой. Их эквиваленты на основе SVG рассматриваются в главе 7.
Доступные CSS-фильтры
Выбирать мы можем из нескольких фильтров. Рассмотрим каждый из них. Хотя далее будут показаны изображения после применения большинства фильтров, читателям бумажной версии книги с черно-белыми картинками заметить разницу будет нелегко. Оказавшись в подобной ситуации, следует помнить, что работу различных фильтров можно по-прежнему увидеть в браузере, открыв файл из каталога example_06-08. Теперь я собираюсь перечислить все эти фильтры с указанными для них подходящими значениями. Нетрудно представить, что чем больше значение, тем выше степень применения фильтра. Там, где используются изображения, они следуют сразу же после соответствующего кода.
• filter: url ('./img/filters.svg#filterRed') — позволяет указать используемый SVG-фильтр.
• filter: blur(3px) — используется единственное значение протяженности размытия (но только не в процентном выражении).
• filter: brightness(2) — используются значения в диапазоне от 0 до 1 или от 0 до 100 %. Значения 0 или 0% приводят к полному затемнению изображения, 1 или 100% обеспечивают нормальную яркость, а более высокие значения вызывают осветление элемента.
• filter: contrast(2) — применяются значения в диапазоне от 0 до 1 или от 0 до 100 %. Значения 0 или 0% приводят к полному затемнению изображения, 1 или 100 % обеспечивают нормальную контрастность, а более высокие значения вызывают повышение цветовой контрастности.