Вторник, 26 Марта 2013 10:42

Свойство background, фон элемента

Written by 
Оцени эту запись
(1 Голос)

Свойство background задает фон элемента, позволяет задать одновременно цвет фона, фоновое изображение, положение и повторение фонового изображения.

 

Пример:

 

<div class="background">Text</div>

 

CSS:

.background {

width: 100px;

height: 100px;

background: violet url(http://kate-land.net/images/stories/img-masc.png) top left repeat;

color: white;

}

 

 

Результат:

 

 

Text

 

 

Разберем теперь подробнее фон элемента.

 

CSS свойство background

 

Запись в строке background violet url(http://kate-land.net/images/stories/img-masc.png) top left repeat
Значение общее свойство, которое объединяет все свойства цвет фона путь к фоновому изображения позиция фонового изображения повтор фонового изображение
Соответствующее свойство background background-color background-image background-position background-repeat
Значения свойства - || - запись цвета в виде #fff(HEX), white(название цвета) url("путь_к_файлу")

left, right, top, bottom, center,

отступ в пикселях или процентах

repeat-x(повтор по горизонтали),

repeat-y(повтор по вертикали),

no-repeat(без повтора),

repeat(вопрос по обеим осям)

Значения по умолчанию объединение всех transparent none 0% 0% repeat

 

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

 

Также используется свойство background-attachment, которое указывает будет ли прокручиваться фоновое изображения при прокрутке элемента.

 

В CSS3 можно задавать несколько фонов изображения через запятую.

 

Пример:

 

background: url(image1.png) center center no-repeat, url(image2.jpg) repeat;

 

 

Результат:

 

 

Text

 

 

Background-repeat

 

Свойство background-repeat, как уже упоминалось ранее, отвечает за повтор фонового изображения. Фоновое изображение можно повторять по горизонтали (вертикальные полоски), по вертикали (горизонтальные полоски), по двум направлениям (квадратики) или не повторять. Рассмотрим несколько примеров:

 

 

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;

 

 

 

В первом случае у нас есть маленькая картинка с квадратиком, которую мы повторяем по обоим направлениям.

Во втором случае мы делаем верхний градиент при помощи картинки, картинка шириной в 1px и повторяется по горизонтали.

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

В четверном варианте мы вообще не повторяем фоновое изображение.

Пятый случай аналогичный второму, но мы ему добавили фоновый цвет:

 

 

background: #a6a8ab url(/media/demos/demos/images/bg2.png); background-repeat: repeat-x;

 

Подробнее о background-repeat читайте в статье - Background-repeat. Изучаем его возможности на примерах

 

 

Background-position

 

Свойство background-position отвечает за положение фонового изображения. Фон можно начинать с левого верхнего угла или правого нижнего, с отступом в 20px или в процентах.

 

 

background-position: top left
background-position: right bottom
background-position: -20px 50%

 

Левый верхний угол                Правый нижний угол                    -20px влево и 50% по вертикали

 

 

Свойство background-position часто используется при работе со спрайтами, когда из одной картинки делают много элементов:

 

 

 

 

.sprites_img_holder{background: #30171b; width: 175px; padding: 10px 0 10px 10px;}

.sprites_img_holder a {display: block; width: 19px; height: 19px; background: url(http://kate-land.net/images/stories/soc.png); background-repeat: no-repeat; float: left; margin-right: 10px;}

.sprites_img_holder a.icon1 {background-position: 0px 0px;}

.sprites_img_holder a.icon2 {background-position: 0px -20px;}

.sprites_img_holder a.icon3 {background-position: 0px -40px;}

.sprites_img_holder a.icon1:hover {background-position: -21px 0px;}

.sprites_img_holder a.icon2:hover {background-position: -21px -20px;}

.sprites_img_holder a.icon3:hover {background-position: -21px -40px;}

 

 

 

Фоновый градиент

 

В CSS3 можно задавать фону градиентную заливку при помощи свойства background-image. Кроссбраузерно это можно сделать так:

 

background-image: linear-gradient(bottom, rgb(70,76,148) 18%, rgb(245,86,240) 77%);

background-image: -o-linear-gradient(bottom, rgb(70,76,148) 18%, rgb(245,86,240) 77%);

background-image: -moz-linear-gradient(bottom, rgb(70,76,148) 18%, rgb(245,86,240) 77%);

background-image: -webkit-linear-gradient(bottom, rgb(70,76,148) 18%, rgb(245,86,240) 77%);

background-image: -ms-linear-gradient(bottom, rgb(70,76,148) 18%, rgb(245,86,240) 77%);

background-image: -webkit-gradient(

linear,

left bottom,

left top,

color-stop(0.18, rgb(70,76,148)),

color-stop(0.77, rgb(245,86,240))

);

 

 

Результат:

 

Text

 

Подробнее о background градиенте можно прочитать здесь:

 

Background Gradient CSS

Background Gradient CSS. Часть 2

 

 

Background-size

 

Свойство background-size было добавлено в CSS3. Оно дает возможность масштабировать фоновое изображение.

 

 

Text

 

Мы взяли ту же картинку с узором, но сделали ее размер меньше:

 

background: url(/media/demos/demos/images/bg4.png) top left repeat; background-size: 20px;

 

 

Background-clip

 

Свойство background-clip позволяет управлять отображением фона - внутри контента(content-box), внутри границ(padding-box), под границами(border-box).

 

 

background-clip: content-box
background-clip: border-box
background-clip: padding-box

 

 

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов