Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Создание фоновой картинки css стилями. Классный пример множественных изображений

Доброго времени суток, постоянные читатели моего обучающего блога и гости сайта. Сегодняшняя публикация посвящена важному элементу, без которого ваш веб-сервис будет выглядеть сухо, блекло и даже может оттолкнуть пользователей. Я расскажу, как управлять таким объектом, как фоновая картинка css.

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

Его высочество background

Для того чтобы растягивать, форматировать и всячески видоизменять фоновое изображение, нужно знать лишь одно универсальное свойство – background. С его помощью можно указывать сразу несколько характеристик рисунка: определять цвет и/или фоновое изображение, устанавливать размер, способ позиционирования, скролирование, повторение и т.д.

Все это можно указывать как в выше названом свойстве, так и в конкретных элементах css. Ниже я описал отдельные элементы, редактирующие задний фон, и структурировал их в таблицу.

Свойство Назначение
background-image Определяет картинку фона. Может существовать вместе с указанием фонового цвета. Последний будет виден пользователю в 3 случаях:

·       Пока изображение грузится;

·       Если рисунок недоступен для просмотра;

·       Если на картинке имеются прозрачные области.

Можно устанавливать путь к графическому файлу, очищать значение (none) или наследовать от предка (inherit). В спецификации css3 появилась возможность перечисления нескольких фоновых изображений. К этому дополнению я вернусь чуть позже.
background-attachment Отвечает за скролирование объекта. Может быть прокручиваемым вместе с контентом (scroll), фиксированным (fixed) или наследоваться от родителя (любимое слово inherit).
background-clip Указывает способ отображения краев графического файла под границами (чтоб увидеть разницу используете пунктирные border-ы или прозрачные).

Можно установить 3 параметра:

1.    content-box – фон расположен только внутри текста или другого вида контента

2.    padding-box – фон виден внутри рамки

3.    border-box выводит фон под border-ом.
background-color Устанавливает фоновый цвет.
background-position Отвечает за расположение картинки заднего фона по вертикали (top, center, bottom) и по горизонтали (left, center, right).

Также можно указывать расположение в единицах измерения (px, %, em и т.д.). Иногда используются отдельные свойства для определения вертикального (background-position-y) или горизонтального (background-position-x) позиционирования.
background-repeat Задает повторяющееся отображение фоновых картинок. Повторы могут осуществляться по горизонтали (repeat-x), вертикали (repeat-y), по двум направлениям (repeat), не дублироваться (no-repeat).
В css3 можно устанавливать одновременно 2 значения, а также использовать space – видимая область заполняется дубликатами рисунка и round – картинка повторяется целое число раз.
background-size Определяет размер изображения.  Спецификация css3 предусматривает 2 новых ключевых свойства:


·       cover – растягивает фон на весь экран, сохраняя пропорции

·       contain – масштабирует фоновый рисунок так, чтобы он заполнил блок.
background-origin Работает только в случае, если изображение скролируется. Поддерживает определение сразу нескольких значений. Указывает способ позиционирования объектов. Использует такие ключевые слова:

·       content-box – изображение выводится с самой верхней левой точки контента

·       padding-box – название говорит само за себя: позиционирование происходит относительно внутренней границы

·       border-box – объект располагается, начиная с линии border.

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

Пример фонового изображения

Я знаю, что многим не терпится увидеть программную реализацию теоретического материала, но подождите еще немного. Для начала я хочу рассказать и об этой технологии, а потом приведу пример с использованием большинства описанных свойств.

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

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

С появлением css3 реализация такой технологии значительно упростилась, так как в backgroung- image можно прописать сразу несколько путей к изображениям.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Растягиваемый фон</title>
  <style>
   body {
    background-image: url(http://img-fotki.yandex.ru/get/5642/16969765.110/0_704d0_8e3d9602_orig.png), url(http://luxfon.com/images/201203/luxfon.com_5408.jpg);
     background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-size: 30%, cover;
    background-attachment: fixed, fixed;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Аналогично будет выглядеть и следующая реализация поставленной задачи:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Растягиваемый фон</title>
  <style>
 
  body {
    background: url(http://img-fotki.yandex.ru/get/5642/16969765.110/0_704d0_8e3d9602_orig.png) center center no-repeat fixed,  
               url(http://luxfon.com/images/201203/luxfon.com_5408.jpg) center center no-repeat fixed;
     background-size: 30%, cover;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Ну вот я объяснил вам основные механизмы управления рисунками заднего фона. Некоторые могут подумать: «А где же описание адаптивных изображений?». Это правильный вопрос и тянет на отдельную статью, которая, кстати, выйдет очень скоро.

А пока настало время прощаться. Надеюсь публикация вам понравилась. Буду рад новым подписчикам! Пока-пока!

С уважением, Роман Чуешов


Прочитано: 61 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: