В этой главе вы узнаете, как добавить несколько фоновых изображений к одному элементу.
Вы также узнаете о следующих свойствах:
background-size
background-origin
background-clip
In this chapter you will learn how to add multiple background images to one element.
You will also learn about the following properties:
background-size
background-origin
background-clip
CSS позволяет добавлять несколько фоновых изображений для элемента с помощью Свойство background-image
.
Различные фоновые изображения разделяются запятыми. накладываются друг на друга так, чтобы первое изображение было ближе всего к зрителю.
В следующем примере есть два фоновых изображения, первое изображение — цветок. (выровнено по нижнему и правому краю), а второе изображение представляет собой бумажный фон (выровнено по верхнему левому углу):
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Несколько фоновых изображений можно указать, используя либо отдельные свойства фона (как указано выше) или сокращенное свойство background
.
В следующем примере используется сокращенное свойство background
(тот же результат, что и пример выше):
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Свойство CSS background-size
позволяет указать размер фоновых изображений.
Размер можно указать в длинах, процентах или с помощью одного из двух ключевые слова: содержать или покрывать.
В следующем примере размер фонового изображения изменяется намного меньше, чем исходное изображение (с использованием пикселей):
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Вот код:
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid black;
background: url(img_flwr.gif);
background-size: 100px 80px;
background-repeat: no-repeat;
padding: 15px;
}
#example2 {
border: 1px solid black;
background: url(img_flwr.gif);
background-repeat: no-repeat;
padding: 15px;
}
</style>
</head>
<body>
<h1>The background-size Property</h1>
<p>Resized background-image:</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>Original size of the background-image:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Два других возможных значения для background-size
:
contain
cover
Ключевое слово contain
масштабирует фоновое изображение до максимально возможного размера. (но его ширина и высота должны помещаться внутри области содержимого). Таким образом, в зависимости от пропорций фона изображения и области расположения фона, могут быть некоторые области фон, который не покрыт фоновым изображением.
Ключевое слово cover
масштабирует фоновое изображение так, чтобы область содержимого полностью покрыто фоновым изображением (его ширина и высота равны или превышать область содержимого). По этой причине некоторые части фонового изображения могут не отображаться. виден в фоновой области позиционирования.
Следующий пример иллюстрирует использование contain
и cover
:
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover; background-repeat: no-repeat;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: contain;
}
.div2 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: cover;
}
.div3 {
border: 1px solid black;
height: 120px;
width: 150px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>The background-size Property</h1>
<h2>background-size: contain:</h2>
<div class="div1">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>background-size: cover:</h2>
<div class="div2">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<h2>No background-size defined:</h2>
<div class="div3">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<p>Original image:</p>
<img src="img_flwr.gif" alt="Flowers" width="224" height="162">
</body>
</html>
Свойство background-size
также принимает несколько значений размера фона. (с использованием списка, разделенного запятыми), при работе с несколькими фонами.
В следующем примере указаны три фоновых изображения с разными значение размера фона для каждого изображения:
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
padding: 15px;
background-size: 50px, 130px, auto;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Теперь мы хотим, чтобы на веб-сайте было фоновое изображение, охватывающее всю окно браузера всегда.
Требования следующие:
Заполните всю страницу изображением (без пробелов)
Масштабируйте изображение по мере необходимости
Центральное изображение на странице
Не вызывать полосы прокрутки
В следующем примере показано, как это сделать; Используйте элемент <html> (элемент <html> всегда равен высоте окна браузера). Затем установите для него фиксированный и центрированный фон. Затем отрегулируйте его размер с помощью свойство размера фона:
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
body {
color: white;
}
</style>
</head>
<body>
<h1>Full Page Background Image</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Вы также можете использовать различные свойства фона в <div>, чтобы создать главное изображение (большое изображение с текстом) и разместить его там, где хотите.
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">I am John Doe</h1>
<h3>And I'm a Photographer</h3>
<button>Hire me</button>
</div>
</div>
<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>
</body>
</html>
Свойство CSS background-origin
указывает, где находится фоновое изображение. расположен.
Свойство принимает три разных значения:
border-box — фоновое изображение начинается с верхнего левого угла границы
padding-box — (по умолчанию) фоновое изображение начинается с верхнего левого угла края отступа.
content-box — фоновое изображение начинается с левого верхнего угла содержимого
Следующий пример иллюстрирует свойство background-origin
:
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
}
#example2 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: border-box;
}
#example3 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h1>The background-origin Property</h1>
<p>No background-origin (padding-box is default):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: border-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
Свойство CSS background-clip
определяет область рисования фона.
Свойство принимает три разных значения:
border-box — (по умолчанию) фон окрашивается до внешнего края границы
padding-box — фон окрашивается по внешнему краю отступа
content-box — фон окрашивается внутри поля содержимого
Следующий пример иллюстрирует свойство background-clip
:
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Попробуйте сами →
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
}
#example2 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
</style>
</head>
<body>
<h1>The background-clip Property</h1>
<p>No background-clip (border-box is default):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>
Сокращенное свойство для установки всех свойств фона в одном объявлении.
Определяет область рисования фона.
Указывает одно или несколько фоновых изображений для элемента.
Указывает, где расположены фоновые изображения.
Определяет размер фонового изображения(ий)