Одним из важных свойств фоновых изображений в CSS3 стало background-size, которое позволяет устанавливать их размер. Значения этого свойства можно прописавать как в пикселях, так и в процентах.
Пример
<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 перечисляем адреса всех изображений через запятую.
Все картинки в таком случае будут накладываться одна на другую.
И в завершении что бы применить свойства к каждой отдельной картинке необходимо перечислить все нужные вам значения в нужном порядке через запятую.
Пример:
<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 - положение элемента будет вычисляться относительно верхнего левого угла содержимого;
Пример:
<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% самый яркий.
Пример:
<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 – минимальная прозрачность.
Пример:
<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, поэтому не будем на этом зациклевать внимания.
Пример:
<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
- Разбивание текста на столбцы
- Заключение