Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Множественные фоновые изображения

.

Множественные фоновые изображения

Вы, вероятно, обратили внимание на то, что в баннере с линейным градиентом чего-то не хватает: мы забыли про велосипед. До появления CSS3 добавление велосипеда автоматически означало бы появление в разметке дополнительного элемента, который должен был бы содержать новое фоновое изображение. В CSS3 нет необходимости включать новый элемент для каждого фонового изображения; отныне можно добавлять более одного фонового изображения любому элементу, и даже нсевдоэлементу.

Для понимания множественных фоновых изображений вы должны знать синтаксис и значения различных свойств фоновых изображений. Синтаксис всех свойств фоновых изображений одинаков — не имеет значения, одно это изображение или их несколько. Чтобы объявить множественные фоновые изображения, просто перечислите их через запятую.

Пример:

Множественные фоновые изображения

Это будет работать точно так же, как краткое свойство background:

Множественные фоновые изображения

Фоновые изображения располагаются одно поверх другого, причем объявленное первым считается верхним, как будто у него самый большой z-index. Последнее будет нижним, как будто у него самый маленький z- index. В общем, представьте себе, что фоновые изображения лежат стопкой, первое — сверху, последнее — внизу. Если вы хотите объявить фоновый цвет — а это, вполне возможно, понадобится, особенно если у вас светлый текст идет поверх темной картинки, делайте это в последнюю очередь. Часто проще и легче для восприятия делать это отдельно при помощи свойства background-color.

Напомним, что свойство background — это вид сокращенной записи для девяти свойств. Если вы используете сокращенную запись, то любое свойство, которое вы пропустите и не станете объявлять, примет значение по умолчанию, каковые перечислены ниже:

Множественные фоновые изображения

Множественные фоновые изображения

Точно так же, как в случае с единственным фоновым изображением, вы можете включить градиент как одно или несколько фоновых изображений. Ниже показано, как мы сделали это для нашего рекламного баннера (для краткости приведен только вариант свойств без префиксов). Изображение велосипеда было бы включено точно так же в каждой декларации background-image:

Множественные фоновые изображения

Отметьте, что мы поместили изображение велосипеда первым, так как мы хотим, чтобы велосипед находился сверху градиента, а не наоборот. Мы также указали позицию для каждого изображения, поместив их в том же самом порядке, они были объявлены background-image. Если бы была указана только одна позиция (например background-position: 50% 8 8 %;), то считалось бы, что в ней должны быть выве-дены все фоновые изображения — background-position: 50% 88%, 5 0 % 88%;. Но в нашем случае фоновый градиент выводится в позиции 0 0 (левый верхний угол), а велосипед — в позиции 50% 88%.

Поскольку браузер примет только одну декларацию background-image, независимо от того, сколько изображений в ней содержится, изображение велосипеда должно быть в каждой из них, поскольку каждая из них ориентирована на свой браузер. Запомните: браузеры игнорируют инструкции, которых не понимают. Так что если Safari не понимает -moz-linear-gradient (а так и есть), он просто пропустит эту строку.

Заголовок нашей формы также имеет два фоновых изображения. Хотя мы можем просоединить одно очень широкое изображение в данном случае, растянув его на всю форму, в этом нет нужды! Благодаря появлению множественных фоновых изображений в CSS3 мы можем использовать два небольших изображения или даже одно и то же дважды, указав для них разные позиции.

Это экономит трафик, но не только: единственное изображение не всегда может вместить разнородные элементы.

Вот как это выглядит в коде:

Множественные фоновые изображения

.

Читайте так же: