HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

При использовании нескольких фоновых изображений и том условии, что это 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 % обеспечивают нормальную контрастность, а более высокие значения вызывают повышение цветовой контрастности.