HTML Урок 6. Работа с фоном css

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.В этом уроке мы обсудим следующее:

— Принципы CSS-позиционирования
— Абсолютное позиционирование
— Относительное позиционирование

Принципы CSS-позиционирования

Представим окно браузера как систему координат:

Принципы CSS-позиционирования — в том, что вы можете расположить бокс в

системе координат где угодно.
Скажем, мы хотим позиционировать заголовок. При использовании боксовой модели (см.
Урок 9) заголовок выглядит так:

Если мы хотим расположить его на 100px от верхней границы документа и на 200px
слева, мы должны ввести следующий код CSS:

h1 {
position:absolute;
top: 100px;
left: 200px;
}

Вот результат:

Как видите, Позиционирование с помощью CSS — очень точная техника приразмещении элементов. Это намного проще, чем использовать таблицы, прозрачные изображения или ещё что-нибудь подобное.

Абсолютное позиционирование

Элемент, позиционированный абсолютно, не получает никакого пространства в
документе. Это означает, что после позиционирования он не оставляет после себя
пустое пространство.
Для абсолютного позиционирования элемента свойство position
должно иметь значение absolute. Вы можете использовать значения left, right, top
и bottom для размещения бокса.
В качестве примера абсолютного позиционирования мы разместим 4 бокса в углах
документа:

#box1 {
position:absolute;
top: 50px;
left: 50px;
}

#box2 {
position:absolute;
top: 50px;
right: 50px;
}

#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}

#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}

Относительное позиционирование

Чтобы позиционировать элемент относительно, установите в свойстве position
значение relative. Разница между относительным абсолютным
позиционированием состоит в том, как обсчитывается позиционирование.
Позиция элемента, размещаемого относительно, обсчитывается
относительно его оригинальной позиции в документе. Это означает, что вы
смещаете элемент вправо, влево, вверх или вниз. Таким образом, элемент всё ещё
занимает в документе пространство после позиционирования.
Как пример относительного позиционирования попробуем разместить три рисунка
относительно их оригинального расположения на странице. Обратите внимание, что
рисунки оставили после смещения пустое пространство на своих оригинальных
позициях в документе:

#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}

#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}

Наслоение с помощью z-index (Слои)

CSS оперирует в трёх измерениях — высота, ширина и глубина. Мы работали в
двух измерениях на протяжении всех предшествующих уроков.
В этом уроке мы научимся создавать слои/layers. Коротко говоря — упорядочивать
элементы так, чтобы они перекрывались.
Для этого вы можете присвоит каждому элементу номер (z-index).
Элемент с бóльшим номером перекрывает элемент с меньшим номером.
Скажем, мы играем в покер и у нас — royal flush. Наша «рука» должна быть
представлена так, чтобы каждая карта имела z-index:

При этом номера идут подряд (1-5), но того же результата можно добиться и при
использовании 5 различных номеров. Важна хронологическая последовательность
номеров (порядок).
Вот код примера с картами:

#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}

#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}

#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}

#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}

#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}

Это относительно простой метод, но в нём заложены большие возможности. Вы
можете размещать текст над изображением, изображение над текстом и т. д.

Слои можно использовать в различных ситуациях. Например, попробуйте
использовать z-index для эффектов с заголовками вместо создания
этих заголовков как графических элементов. С одной стороны, текст загружается
быстрее, а с другой — потенциально улучшается работа поисковых машин.

ФОНОВОЕ ИЗОБРАЖЕНИЕ С РАЗМЫТИЕМ И ЗАТЕМНЕНИЕМ.

Для работы с фоновым изображением к которому применены стили размытия прозрачности и изменена яркость необходимо создать div в котором будет размещено изображение. Див должен быть абсолютно позиционирован или fixed позиционирован. Для него необходимо использовать z-index =1. А для других дивов использовать z-index с большим значением.

 Z-index — это стиль, который позволяет задавать положение тегов одного над другим. Теги с большими значениями z-index располагаются выше остальных.

opacity:0.8; -задает прозрачность объекта от 0 прозрачный до 1 не прозрачный.

  -webkit-filter: blur(5px) brightness(0.8);
  -moz-filter: blur(5px) brightness(0.8);
  -o-filter: blur(5px) brightness(0.8);
  -ms-filter: blur(5px) brightness(0.8);
  filter: blur(5px) brightness(0.8);

blur  и brightness задают размытие и яркость изображения и являются значениями стиля  фильтр.

Приставки webkit moz 0 ms используютя для совместимости с различнными браузерами.

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

.background-image {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  opacity:0.8;
  display: block;
  background-image: url('images/londres.jpg');
  background-size:100%;
  width: 100%;
  height: 1200px;
  background-color:black;	
  -webkit-filter: blur(5px) brightness(0.8);
  -moz-filter: blur(5px) brightness(0.8);
  -o-filter: blur(5px) brightness(0.8);
  -ms-filter: blur(5px) brightness(0.8);
  filter: blur(5px) brightness(0.8);
   }