logo_s

САМОУЧКА

Сайт для тех, кто хочет научиться

 

 

 

 

 

 

Главная

О Нас

Публикации

Связь

 

 

 

 

 

 

 

Наши публикации

 

HTML для новичков

 

XHTML

 

CSS для новичков

 

CSS 3

 

JavaScript

 

<Предыдущая  Следующая>

CSS3 предоставляет несколько новых свойств позволяющих более гибко управлять фоновыми изображениями.

 

 

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

В CSS2.1 размер фонового изображения нельзя было явно установить, в CSS3 Вы можете устанавливать размер фоновых изображений с помощью свойства background-size.

Размер фоновых изображений может быть указан в пикселях или в процентах.

Пример

 
#wrap1 {
background-image:url("spider2.gif");
background-size:150px 250px;
}
#wrap2 {
background-image:url("spider2.gif");
background-size:70% 70%;
}
 

Несколько фоновых изображений в CSS3

CSS3 расширяет возможности свойства background-image теперь один элемент может иметь несколько фоновых изображений одновременно.

Пример

 
#wrap1 {
background-image:url(wislink.gif),url(mountimg3.jpg);
background-position:bottom right, center;
background-size:150px 40px,100% 100%;
background-repeat:no-repeat,no-repeat;
}
 

Свойство background-origin

С помощью нового CSS3 свойства background-origin Вы можете установить как должно вычисляться положение элемента относительно границ его родительского элемента.

Данное свойство может иметь 3 различных значения:

*border-box положение элемента вычисляется относительно верхнего левого угла границы элемента;

*padding-box положение элемента вычисляется относительно верхнего левого угла блока padding;

*content-box положение элемента вычисляется относительно верхнего левого угла содержимого.

Пример

 
#wrap1 {
background-origin:border-box;
background-image:url("border-box.png");
}
#wrap2 {
background-origin:padding-box;
background-image:url("padding-box.png");
}
#wrap3 {
background-origin:content-box;
background-image:url("content-box.png");
}


<Предыдущая
  Следующая>

 

Последние добавления

 

HotLog