Войти
s-lub » Учебники » CSS 3 » Фон и цвет в CSS 3

Фон и цвет в CSS 3

Фон и цвет в CSS 3

Одним из важных свойств фоновых изображений в CSS3 стало background-size, которое позволяет устанавливать их размер. Значения этого свойства можно прописавать как в пикселях, так и в процентах.

Пример

<html>
<head>
<style type='text/css'>
#wrap1,#wrap2,#wrap3 {
padding:10px;
border:1px #000 solid;
height:250px;
width:300px;
float:left;
margin:10px;
background-repeat:no-repeat;
}
#wrap1 {
background-image:url("css3.png");
background-size:150px 250px;
}
#wrap2 {
background-image:url("css3.png");
background-size:70% 70%;
}
</style>
</head>
<body>
<div id="wrap1"></div>
<div id="wrap2"></div>
</body>
</html>

background-image

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

Для начала нужно вставить в элемент все необходимые изображения, для этого в свойстве background-image перечисляем адреса всех изображений через запятую.

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

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

Пример:

<html>
<head>
<style type='text/css'>
#wrap1 {
background-image:url(html.jpg),url(fon.jpg);
background-position:bottom right, center;
background-size:150px 40px,100% 100%;
background-repeat:no-repeat,no-repeat;
border:3px #000 solid;
height:270px;
width:350px;
border-radius:15px;
float:left;
margin-right:40px;
}
</style>
</head>
<body>
<div id="wrap1"></div>
</body>
</html>

background-origin

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

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

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

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

Пример:

<html>
<head>
<style type='text/css'>
#wrap1,#wrap2,#wrap3 {
padding:10px;
border:7px #000 dotted;
height:150px;
width:200px;
float:left;
margin:10px;
background-repeat:no-repeat;
}
#wrap1 {
background-origin:border-box;
background-image:url("html.jpg");
}
#wrap2 {
background-origin:padding-box;
background-image:url("html.jpg");
}
#wrap3 {
background-origin:content-box;
background-image:url("html.jpg");
}
</style>
</head>
<body>
<div id="wrap1"></div>
<div id="wrap2"></div>
<div id="wrap3"></div>
</body>
</html>

Цвета элементов в CSS 3 можно устанавливать разными способами.

HSL

Одним из способов выбора цвета элементов это HSL, это позволяет придать оттенок, насыщенность и яркость, указываются цвета следующим образом:

- оттенок цвета указывается в градусах поворота цветового круга, 0 градусов – красный и так далее.

- насыщенность цвета указывается в процентах, 100% - самый насыщенный и так по мере понижения до 0.

- яркость цвета так же указывается в процентах, где 0% - самый тёмный, а 100% самый яркий.
Пример:

<html>
<style type='text/css'>
#wrap1,#wrap2,#wrap3 {
border:1px #000 solid;
width:230px;
height:120px;
margin:10px;
float:left;
padding:10px;
font-size:1.5em;
color:#000;
text-decoration:underline;
}
#wrap1 {
background-color:hsl(0,30%,50%);
}
#wrap2 {
background-color:hsl(120,100%,80%);
}
#wrap3 {
background-color:hsl(240,100%,50%);
}
</style>
<body>
<div id="wrap1">hsl(0,30%,50%)</div>
<div id="wrap2">hsl(120,100%,80%)</div>
<div id="wrap3">hsl(240,100%,50%)</div>
</body>
</html>

RGBA

Так же можно устанавливать цвета и с помощью RGBA, этим способом можно одновременно определить и цвет элемента и его прозрачность.

Особенностью этого способа является, то что RGBA придаёт прозрачности только самому элементу, его потомки в этом случае не сохраняют прозрачности.

Устанавливается прозрачность значением от 0 до 1, где 0 – максимальная прозрачность, а 1 – минимальная прозрачность.

Пример:

<html>
<style type='text/css'>
#exbody {
background-image:url(fon.jpg);
background-repeat:no-repeat;
background-size:500px 370px;
}
#wrap1,#wrap2 {
width:200px;
height:120px;
margin:10px;
float:left;
padding:10px;
font-size:1.5em;
background-color:black;
color:white;
z-index:100;
}
#wrap1 {
background-color:rgba(0,0,0,0.6);
}
#wrap2 {
opacity:0.6;
}
</style>
<body id="exbody">
<div id="wrap1">Прозрачность задана с помощью RGBA.</div>
<div id="wrap2">Прозрачность задана с помощью opacity.</div>
</body>
</html>

HSLA

HSLA работает так же как и RGBA, поэтому не будем на этом зациклевать внимания.

Пример:

<html>
<style type='text/css'>
#exbody {
background-image:url(fon.jpg);
background-repeat:no-repeat;
background-size:500px 370px;
}
#wrap1,#wrap2 {
width:200px;
height:120px;
margin:10px;
float:left;
padding:10px;
font-size:1.5em;
background-color:black;
color:white;
z-index:100;
}
#wrap1 {
background-color:hsla(0,100%,0%,0.6);
}
#wrap2 {
opacity:0.6;
}
</style>
<body id="exbody">
<div id="wrap1">Прозрачность задана с помощью HSLA.</div>
<div id="wrap2">Прозрачность задана с помощью opacity.</div>
<div id="under"></div>
</body>
</html>


- Что такое CSS 3 и что в нём изменилось
- Фон и цвет в CSS 3
- Границы и рамки в CSS 3
- Текст и шрифт в CSS 3
- Создание прозрачных элементов и картинок
- Трансформирование в CSS 3
- Линейные градиенты в CSS 3
- Переходы в CSS 3
- Анимация в CSS 3
- Разбивание текста на столбцы
- Заключение