Фоновое изображение css: background-image

Содержание

Учебник CSS 3. Статья «Работа с фоном элемента в CSS»

В этом учебнике мы уже рассмотрели с вами такие аспекты работы с изображениями как использование свойств границ (цвет, стиль и толщина), научились задавать тень для изображений (Статья «Тень элемента в CSS»), рассмотрели, как можно создать эффект рамки, добавив задний фон и пустой промежуток между границей и изображением (Статья «Блочная и строчная модель в CSS»). Научились делать изображения плавающими (Статья «Плавающие элементы в CSS») и позиционировать их относительно краев родительского элемента, научились управлять внешними отступами между элементами, но всего этого пока не достаточно.

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

Фон элемента это общий размер элемента, включая значения внутренних отступов (padding) и границ (border), но, не включая значение внешних отступов – свойство margin.

В настоящее время браузеры работают с тремя графическими форматами:

GIF (англ. Graphics Interchange Format — формат для обмена изображениями).
JPEG (англ. Joint Photographic Experts Group — название организации-разработчика).
PNG (англ. Portable network graphics — растровый формат хранения графической информации).

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

селектор {
background-image: url(images/main_bg.png);
}

Обращаю Ваше внимание на то, что при использовании относительного пути фоновое изображение необходимо указывать относительно адреса файла таблицы стилей, а не HTML страницы на которой предполагается использование фонового изображение.

Давайте рассмотрим пример, в котором установим задний фон, который представляет из себя три разноцветных квадрата размером 100 на 100 пикселей для элемента <body>:

<!DOCTYPE html>
<html>
<head>
	<title>Пример установки изображения в качестве фона</title>
<style> 
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-color: white; /* задаем задний фон для элемента */
}
</style>
</head>
	<body>
	</body>
</html>

По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали, в нашем примере это привело к тому, что элемент <body> полностью заполнился фоновым изображением.

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

Результат нашего примера:

Рис. 115 Пример установки изображения в качестве фона.

Управление повтором фонового изображения

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

Это свойство имеет следующие доступные значения:

Значение	Описание
repeat	Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию.
repeat-x	Фоновое изображение будет повторяться по горизонтали (по оси x).
repeat-y	Фоновое изображение будет повторяться по вертикали (по оси y).
no-repeat	Фоновое изображение не будет повторяться.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример управления повтором фонового изображения</title>
<style> 
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
}
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("small_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
width: 200px; /* устанавливаем ширину элемента */
height: 200px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin-right: 10px; /* устанавливаем внешние отступы справа */
text-align: center; /* выравниваем текст по центру */
line-height: 200px; /* задаем высоту строки */
background-color: azure; /* указываем цвет заднего фона*/
}
 .noRepeat {
background-repeat: no-repeat; /* фоновое изображение не будет повторяться.   */
}
.repeatX {
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
.repeatY {
background-repeat: repeat-y; /* фоновое изображение будет повторяться по вертикали */
}
</style>
</head>
	<body>
		<h2>Значение repeat для body (по умолчанию)</h2>
		<div class = "noRepeat">no-repeat</div>
		<div class = "repeatX">repeat-x</div>
		<div class = "repeatY">repeat-y</div>
	</body>
</html>

По аналогии с предыдущим примером для <body> мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков три класса, которые определяют как будет повторяться фоновое изображение, используя различные значения для свойства background-repeat:

Для первого блока мы указали, что изображение не будет повторяться (значение no-repeat), это значение чаще всего используется в работе.
Второй блок получил значение repeat-x, которое определяет, что фоновое изображение будет дублироваться по горизонтали.
Ну и в третьем блоке фон дублируется по вертикали (значение repeat-y).

Результат нашего примера:

Рис. 116 Пример управления повтором фонового изображения.

Управление позицией фонового изображения

По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием

единиц измерения CSS, либо используя ключевые слова:

Значение	Описание
left top left center left bottom right top right center right bottom center top center center center bottom	Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center»
x% y%	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.
x y	Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.

Рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования фонового изображения</title>
<style> 
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
 .leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
	<body>
		<div class = "leftTop">left top</div>
		<div class = "leftCenter">left center</div>
		<div class = "leftBottom">left bottom</div>
		<div class = "rightTop">right top</div>
		<div class = "rightCenter">right center</div>
		<div class = "rightBottom">right bottom</div>
		<div class = "centerTop">center top</div>
		<div class = "centerCenter">center center</div>
		<div class = "centerBottom">center bottom</div>
		<div class = "userPosition">20px 75%</div>
	</body>
</html>

В данном примере, мы создали 10 блоков с различными классами, в которых заданы различные значения, связанные с позиционированием фоновых изображений. Для первых девяти блоков были использованы всевозможные ключевые слова

, а для последнего блока было задано значение для горизонтального позиционирования в пикселях, а для вертикального в процентах.

Результат нашего примера:

Рис. 117 Пример позиционирования фонового изображения.

Фиксированный задний фон

Когда вы прокручиваете содержимое страницы фоновое изображение, как правило, прокручивается вместе с содержимым. Это значение используется по умолчанию и подходит для большинства задач, но средствами CSS вы можете изменить такое поведение заднего фона, например, зафиксировав его.

Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс» эффект.

<!DOCTYPE html>
<html>
<head>
	<title>Пример фиксированного фонового изображения</title>
<style> 
div {
height: 600px; /* устанавливаем высоту элемента */
}
.primerFixed {
background-image: url('nich.jpg'); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-attachment: fixed; /* указываем, что задний фон будет зафиксирован */
background-position: center; /* центрируем задний фон */
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
</style>
</head>
<body>
	<div></div>
	<div class = "primerFixed"></div>
	<div></div>
</body>
</html>

В данном примере для всех элементов <div> мы установили высоту равную 600px и разместили три таких блока на странице. Для среднего блока мы создали класс .primerFixed, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (ось x). Для демонстрации эффекта «параллакс» откройте пример в отдельном окне браузера и прокрутите страницу вниз.

Результат нашего примера:

Рис. 118 Пример фиксированного фонового изображения.

Свойства CSS 3 для работы с фоновыми изображениями

Настало время углубить свои знания в работе с задним фоном элементов и познакомиться с новыми свойствами CSS, которые были введены в стандарте CSS 3.

И первое CSS свойство, которое мы рассмотрим — background-origin, оно определяет как позиционируется фоновое изображение, или изображения по отношению к границе, внутреннему отступу и содержимому элемента.

Возможные значения этого свойства:

Значение	Описание
padding-box	Фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
border-box	Фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента).
content-box	Фоновое изображение позиционируется от верхнего левого угла содержимого элемента.

Рассмотрим применение этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-origin</title>
<style> 
div {
width: 10em; /* устанавливаем ширину элемента */
height: 10em; /* устанавливаем высоту элемента */
border: 5px dashed orange; /* устанавливает пунктирную границу размером 5px оранжевого цвета */
background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 15px; /* устанавливаем величину внешнего отступа от правого края элемента */
padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
color: yellow; /* устанавливаем цвет шрифта желтый */
}
.test {background-origin: padding-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон) */
.test2 {background-origin: border-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента) */
.test3 {background-origin: content-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла содержимого элемента */
</style>
</head>
<body>
	<div class = "test">padding-box</div>
	<div class = "test2">border-box</div>
	<div class = "test3">content-box</div>
</body>
</html>

В данном примере мы разместили три блока, задали для них задний фон в виде изображения и указали для них различные значения свойства background-origin:

Первый блок (padding-box) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
Второй блок (border-box) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента со всех сторон).
Третий блок (content-box) — фоновое изображение позиционируется от верхнего левого угла содержимого элемента (изображение не заходит под границу элемента с этих сторон).

Результат нашего примера:

Рис. 119 Пример использования свойства background-origin.

И так на очереди следующее CSS свойство — background-clip, оно определяет ту область элемента, для которой будет задан задний фон.

У Вас может возникнуть вопрос: — А в чем собственно заключается разница между свойством background-origin и background-clip?

Разница заключается в том, что свойство background-clip в отличие от background-origin обрезает ту часть фона, которая выходит из указанных рамок. Свойство background-origin лишь определяет, как позиционируется фоновое изображение.

В таблице представлены возможные значения этого свойства:

Значение	Описание
border-box	Фон элемента занимает все пространство (включая границы элемента). Это значение по умолчанию.
padding-box	Фон элемента занимает все пространство (не включая границ элемента).
content-box	Фон элемента занимает все содержимое элемента (если у элемента установлены значения padding (внутренние отступы), то это пространство не будет окрашено).

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-clip</title>
<style> 
div {
width: 10em; /* устанавливаем ширину элемента */
height: 9em; /* устанавливаем высоту элемента */
background-image: url(medved.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
border: 5px dashed yellow; /* устанавливает пунктирную границу размером 5px черного цвета */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 10px; /* устанавливаем величину внешнего отступа от правого края элемента */
padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
}
.test {background-clip: border-box;}  /* устанавливаем, что фон элемента занимает все пространство (включая границы элемента) */
.test2 {background-clip: padding-box;}  /* устанавливаем, что фон элемента занимает все пространство (не включая границы элемента) */
.test3 {background-clip: content-box;}  /* устанавливаем, что фон элемента занимает все содержимое элемента */
</style>
</head>
<body>
	<div class = "test">border-box</div>
	<div class = "test2">padding-box</div>
	<div class = "test3">content-box</div>
</body>
</html>

В этом примере мы разместили три блока, установили для них задний фон в виде изображения и указали различные значения свойства background-clip:

Первый блок (padding-box) — фон элемента занимает все пространство. Это значение по умолчанию.
Второй блок (border-box) — фон элемента занимает все пространство (не включая границы элемента).
Третий блок (content-box) — фон элемента занимает все содержимое элемента.

Результат нашего примера:

Рис. 120 Пример использования свойства background-clip.

Как вы могли заметить свойства background-origin и background-clip, имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.

На очереди следующее свойство, которое позволит нам в полной мере управлять задним фоном элемента по своему усмотрению — это свойство background-size, оно имеет широкое применение в современной верстке сайтов, так как позволяет управлять размером фонового изображения.

Установить размер заднего фона допускается с использованием единиц измерения CSS, процентов, либо ключевых слов:

Значение	Описание
auto	Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
length	Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
%	Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
cover	Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения.
contain	Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Рассмотрим применение этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример масштабирования фоновых изображений</title>
<style> 
div {
width: 8em; /* устанавливаем ширину элемента */
height: 8em; /* устанавливаем высоту элемента */
border: 3px solid orange; /* устанваливаем сплошную границу размером 3 пикселя оранжевого цвета */
background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 15px; /* устанавливаем внешний отступ с правой стороны */	
margin-bottom: 15px; /* устанавливаем внешний отступ с нижней стороны */	
color: yellow; /* устанавливаем цвет элемента */
}
.test {background-size: auto;} /* фоновое изображение содержит свою ширину и высоту */
.test2 {background-size: 100px 100px;} /* устанавливаем ширину и высоту фонового изображения в пикселях */
.test3 {background-size: 70% 70%;} /* устанавливаем ширину и высоту фонового изображения в процентах от родительского элемента */
.test4 {background-size: cover;} /* масштабируем фоновое изображение под размеры элемента */
.test5 {background-size: contain;} /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */
</style>
</head>
	<body>
		<div class = "test">auto</div>
		<div class = "test2">100px 100px</div>
		<div class = "test3">70% 70%</div><br>
		<div class = "test4">cover</div>
		<div class = "test5">contain</div>
	</body>
</html>

В данном примере мы разместили пять блоков, задали для них задний фон в виде изображения и указали для них различные значения свойства background-size:

Первый блок (auto) — фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
Второй блок (100px 100px) — первое значение устанавливает ширину, второе значение задает высоту в пикселях.
Третий блок (70% 70%) — первое значение устанавливает ширину, второе значение задает высоту в процентах.
Четвертый блок (cover) – масштабирует фоновое изображение под размеры элемента (некоторые части фонового изображения скрываются из поля зрения).
Пятый блок (contain) – масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Результат нашего примера:

Рис. 121 Пример масштабирования фоновых изображений.

Универсальное свойство background

Мы с Вами рассмотрели все свойства, которые предназначены для работы с фоновыми изображениями. В большинстве случаев вводить длинные названия рассмотренных выше свойств непродуктивно, но это не значит, что мы зря потратили на это время — без понимания как они работают по отдельности, вы не сможете грамотно их применять в одном объявлении.

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

Давайте рассмотрим пример использования универсального свойства background:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования универсального свойства background</title>
<style> 
html, body {
height: 100%; /* устанавливаем высоту элементов */
width: 100%; /* устанавливаем ширину элементов */
margin: 0; /* убираем внешние отступы элемента */
padding: 0; /* убираем внутренние отступы элемента */
}
header {
width: 100%; /* устанавливаем ширину элемента */
min-height: 34%; /* устанавливаем минимальную высоту элемента */
background: white url('cat_g.jpg') bottom/cover no-repeat; /* указываем цвет заднего фона, фоновое изображение, позицию/масштабируем под размеры элемента, фон не повторяется */
}
.primer2 {
width: 100%; /* устанавливаем ширину элемента */
min-height: 66%; /* устанавливаем минимальную высоту элемента */
background: url('lis.png') top/contain no-repeat, url('cat_g.jpg') bottom/cover no-repeat; 
/* Обратите внимание, что значения для различных изображений указываются через запятую */
/* Путь к изображению 1 позиция/масштаб повтор, Путь к изображению 2  позиция/масштаб повтор */
}
</style>
</head>
	<body>
		<header></header>
		<div class = "primer2"></div>
	</body>
</html>

И так, что мы сделали в этом примере:

Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение — url(‘cat_g.jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается — значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

Обращаю Ваше внимание на то, что установка нескольких фоновых изображений в качестве заднего фона для одного элемента выполнена для демонстрации возможностей CSS. В большинстве случаев проще установить один задний фон для одного элемента, а уже этот элемент настроить и позиционировать в документе как вам необходимо. Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и три изображения) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующий документ (внимательно изучите страницу перед выполнением):
Практическое задание № 28.
Подсказка: для того, чтобы отцентровать содержимое, необходимо указать значение auto для внешних отступов слева и справа, обратите внимание, что в примере использована тень для блоков.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

Пособие для начинающих по позиционированию фона в CSS — CSS-LIVE

Перевод статьи A Primer To Background Positioning In CSS с сайта blogs.adobe.com, автор — Сара Суэйдан.

Применение фоновых изображений к элементам, вероятно, одна из самых востребованных возможностей в CSS, и есть множество фоновых свойств, которые позволяют нам управлять различными аспектами фона элемента.

У элемента может быть более одного фонового изображения. Если вы хотите применить более одного фонового изображения, то можете представить их в виде разделённого запятыми списка значений для свойства background-image. Свойство background-position используется для указания позиции фонового изображения, и это свойство стоит рассмотреть поглубже, т.к. его различные возможные значения приводят к разным результатам, некоторые из которых могут оказаться для вас в новинку, если вы не очень хорошо разбираетесь в CSS.

Мы будем позиционировать одно фоновое изображение во всех примерах, чтобы сохранить код и общие понятия простыми на протяжении всей статьи. Но что подходит для одного фонового изображения, то применимо и ко множественным.

Фоновое изображение позиционируется внутри того, что называется «областью позиционирования фона» элемента. Эта область позиционирования фона, как ясно из названия, указывает область, внутри которой будет позиционироваться фон, и у нее есть система координат, используемая для работы с позиционированием.

Прежде чем продолжить углубляться в основные понятия позиционирования, давайте сначала быстренько заглянем в боксовую модель CSS и посмотрим, как она влияет на позиционирование фоновых изображений внутри элемента.

Области боксовой модели CSS

У элемента в CSS определены три области, называемые боксами: border box (бокс по границы включительно), padding box (бокс по отступу) и content box (бокс по содержимому). border box – область элемента, которая включает всю его внутреннюю часть плюс область, которую занимают сами границы.

Padding box – область элемента, исключающая границу, но включающая контент элемента и окружающие его отступы – указанные при помощи свойства padding.

Content box – область, созданная контентом элемента, исключающая любые отступы и границы.

Области бокса элемента. Изображение взято из CSS-справочника на Codrops, статья про свойство background-origin.

Есть также четвёртая область — «margin box», включающая элемент и его внешние поля, которые указываются при помощи свойства margin.

Когда вы назначаете элементу фон в виде изображения или сплошного цвета, то по умолчанию он закрашивает всю область границы элемента. (Можно изменить это поведение при помощи свойства background-origin, но мы вернёмся к нему в ближайшее время.)

Чтобы указать, где именно внутри области позиционирования будет находиться фоновое изображение, этой области необходима система координат, используемая для преобразования в неё значений background-position. Прежде чем двигаться дальше, давайте повнимательнее рассмотрим эту систему координат.

Система координат элемента

По умолчанию, по самой природе боксовой модели элемента в CSS, у каждого элемента есть система координат, которая определяется его высотой и шириной. Эта система координат используется, чтобы позиционировать элемент относительно других элементов и позиционировать потомков элемента относительно него самого.

У HTML-элемента есть система координат в CSS. У SVG-элементов, напротив, нет похожей системы координат, поскольку они не регламентируются концепцией боксовой модели.

Начальная точка системы координат в CSS расположена в левом верхнем углу элемента.

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

Поскольку по умолчанию областью позиционирования является padding box, то по умолчанию начальной точкой системы координат области позиционирования фона будет верхний левый угол области внутреннего отступа элемента.

Это означает, что, когда вы применяете фоновое изображение к элементу, браузер будет позиционировать первое и последующие повторения изображения, начиная от верхнего левого угла области внутреннего отступа элемента.

Например, предположим у вас есть фоновое изображение, применённое к элементу, и вы не задали ему повторение (поэтому применяется только один экземпляр этого изображения). Исходной позицией фонового изображения внутри системы координат будет начальная точка системы координат padding box. Поэтому верхний левый угол изображения позиционируется в верхнем левом углу внутреннего отступа элемента. (См. живой пример ниже.)

К элементу применена полупрозрачная граница в 20px. Заметьте, как изображение позиционируется в верхнем левом углу внутреннего отступа элемента.

Изображение любезно предоставлено Freepik.com

Используя свойство background-position, о котором мы поговорим в этой статье, мы можем изменять позицию изображения внутри этой системы координат.

Но как упоминалось ранее, мы можем изменить область позиционирования фона, и это, в свою очередь, изменит начальную точку, используемую для позиционирования изображения внутри области фона элемента.

Изменение области позиционирования фона и системы координат при помощи

background-origin

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

Оно принимает одно из трёх значений: padding-box (значение по умолчанию), content-box и border-box.

В зависимости от выбора области позиционирования фона, соответствующей точке отсчета для фона — начальная точка системы координат, установленной для этой области — изменится, и начальное (по умолчанию) положение фонового изображения тоже.

Следующий живой пример показывает разные исходные точки фона/области позиционирования в действии.

Смотрите пример Сары Суэйден (@SaraSoueidan) «Разные значения background-origin» на CodePen.

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

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

Ради простоты, в остальной части этой статьи, мы оставим область позиционирования фона элемента по умолчанию. Поэтому все наши примеры будут применены к элементу, у которого фон позиционируется именно в области отступа.

Позиционирование фоновых изображений при помощи

background-position

В прошлом разделе мы видели, как фоновое изображение по умолчанию позиционируется в левом верхнем углу области позиционирования. Это связано с тем, что по умолчанию значение свойства background-position равно 0% 0%.

По умолчанию для background-position используются процентное значение. В background-position можно подставлять либо процентное, либо абсолютное значение, которые указывают смещение изображения от одного из четырёх краёв области позиционирования (вверх, право, низ, лево)

Углы смещения элемента и система координат в CSS.

В дополнение к процентным и абсолютным значениям, для смещения можно использовать ещё и пять ключевых слов: top, right, bottom, left и center.

Положение фона можно описывать при помощи указания одного значения для смещения (ключевое слово, проценты или длина), двух значений (пара значений с теми же тремя вариантами для каждого) или четырёх значений (ключевое слово и числовое значение смещения относительно соответствующего края). Мы поговорим об этом более детально в последующих разделах.

background-position: top left;
background-position: 50px 30%;
background-position: top 25%;
background-position: right 10px bottom 20px;
background-position: center center
background-position: 10px 20px;
background-position: 5em 2em;
background-position: 75% 50%;

Если вы укажите только одно значение, то второе будет считаться, как center. Если укажите два значения, то первое будет определять смещение от левого угла — т.е. горизонтальную позицию, а второе – смещение вниз от верхнего угла — вертикальную позицию.

background-position: 10% 50%; /* смещение на 10% вправо, и 50% вниз от верха */
background-position: top; /* идентично `top center` */
background-position: 50px; /* идентично `50px center` */

Можно смешивать и сочетать значения, комбинируя длину с процентами и/или ключевыми словами. Заметьте, что пару ключевых слов можно поменять местами, тогда как комбинацию ключевого слова и длины либо процентов — нельзя. Поэтому center left — правильная запись, а 50% left — нет, она должна выглядеть так: left 50%. При комбинировании ключевого слова и длины или процентного значения, первое значение всегда отвечает за горизонтальное смещение, а второе — за вертикальное.

Собственно говоря, ключевое слово – это сокращённая запись для определённых процентных значений. Точнее сказать: top — смещение 0% от верхнего края, bottom — смещение 100% от верхнего края, left — смещение 0% от левого края, right — смещение 100% от левого края, а center — смещение 50% в том направлении (горизонтальном или вертикальном), к которому оно применяется.

Начнём с того, как работает каждый тип значения — вероятно, это наиболее важная вещь, т.к. есть фундаментальное различие между тем, как браузер позиционирует фоновые изображения при абсолютных и процентных значениях. По ходу изучения мы посмотрим больше примеров.

Как работают абсолютные значения background-position

При указании значения в абсолютных единицах, вы смещаете верхний угол фонового изображения на указанное число. Другими словами, изображение передвинется так, чтобы его верхний левый угол позиционировался на указанные в значении background-position смещения.

Лучший способ объяснить и понять это – показать наглядно, поэтому здесь представлено два примера абсолютных значений позиции фона и то, как браузеры реализуют позиционирование фонового изображения при помощи абсолютных значений. Элементу в этих двух примерах задан размер 100px на 80px.

Позиционирование фонового изображения при помощи абсолютных значений.

Абсолютное значение также может быть отрицательным. В этом случае изображение сместится в обратном направлении от края.

Пример, показывающий смещение изображения при помощи отрицательного значения.

Попробуйте изменить значения позиции фона в следующем живом примере, чтобы увидеть, как оно влияет на изображение. И обязательно попробуйте отрицательное значение!

Как работают процентные значения background-position

В отличие от значения смещения в абсолютных единицах длины, которое двигает верхний левый угол элемента на указанное расстояние, процентное значение выравнивает точку в X% от левого (для горизонтальной составляющей) или верхнего (для вертикальной) края изображения с точкой в X% от левого (для горизонтальной) или верхнего (для вертикальной) края контейнера.

Например, процентное значение 0% 0% выровняет точку 0% 0% изображении с точкой 0% 0% в системе координат области позиционирования фона. Значение 50% 75% свойства background-position выровняет точку, которая находится в 50% от левого и в 75% от верхнего края изображения с точкой, которая расположена на 50% 75% в области позиционирования фона.

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

Позиционирование фонового изображения при помощи процентных значений..

Как и с абсолютными единицами длины, можно указать процентное смещение в отрицательных значениях, и они передвинут фоновое изображение на указанное значение в противоположенном направлении на соответствующей оси. Поэтому значения -10% -30% сместят изображение на 10% влево от левого края и на 30% вверх.

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

Смотрите пример Сары Суэйден (@SaraSoueidan) «background-position Example#2» на CodePen.

Позиционирование в предыдущих двух примерах делается относительно верхнего и левого краёв. Теперь давайте посмотрим, как можно объединить ключевые слова вместе с численными значениями смещения (процентами или абсолютными единицами), чтобы позиционировать изображения вдоль области позиционирования фона относительно любого из четырёх краёв элемента.

Смещение относительно любого края

В примерах из предыдущих двух разделов мы указывали смещения и видели, как они используются, чтобы переместить изображение относительно верхнего и левого края — т.е. поведение по умолчанию для одного или двух значений background-position.

Когда мы объединяем в четырёхзначный синтаксис ключевые слова для смещения с численными значениями, мы также можем сместить фоновое изображение от правого и нижнего краёв области позиционирования.

Чтобы это сделать, всё что нам надо, это указать название края, который нужно использовать, за которым должно следовать число (в абсолютных или процентных значениях), на которое сместится изображение от самого края.

Например, в следующем примере используется четырёхзначный синтаксис:

background-position: top 1em right 3em; /* фоновое изображение позиционируется на 1em вниз от верхнего угла и на 3em влево от правого угла */

background-position: right 1em bottom 1em; /* фоновое изображение позиционируется на 1em вверх от нижнего угла и 1em влево от правого угла */

background-position: left 20px bottom 50px;

Если указано три из четырёх значений, четвёртое значение приравнивается к нулю.

При использовании четырёхзначного синтаксиса следует кое-что помнить: когда приведено три или четыре значения, тогда каждое процентное значение или длина представляют смещение и должны идти за ключевым словом, указывающим край, от которого должно смещаться фоновое изображение. Например, background-position: bottom 10px right 20px представляет вертикальное смещение на 10px вверх от нижнего края и горизонтальное смещение на 20px влево от правого края. Если указано три значения, недостающее смещение приравнивается к нулю. Если вы укажите два численных смещения и одно ключевое слово, то такое значение будет неверным и браузер использует 0% 0% — значение по умолчанию.

Чтобы лучше это понять, поиграйтесь со значениями свойства background-position в следующем живом примере. Для лучшего понимания фоновое изображение сначала позиционируется так, чтобы оно смещалось на 0 пикселей от нижнего и 2em от правого края.

Это особенно полезно, когда вам нужно по умолчанию позиционировать изображение на расстояние от правого и нижнего краёв, что сделает эту задачу намного легче, чем вынужденное высчитывание относительных смещений от верхнего и левого углов.

Установка размеров, повторение, обрезка изображений и многое другое!

Помните, что можно к элементу можно применять множественные фоновые изображения. Для каждого фонового изображения (представленных в виде списка изображений, разделённого запятыми в background-image) можно указать соответствующую фоновую позицию; множественные позиции также разделяются запятыми.

В общем, есть девять CSS-свойств, которые управляют раскладкой, позиционированием, определением размеров и закрашиванием фоновых изображений, включая сокращённое свойство background, которое используется для установки и сброса других сокращённых свойств. Каждое свойство позволяет делать что-нибудь одно, а вместе они дают нам отличный контроль над тем, как применять фоновые изображения к любому элементу в HTML.

Кроме того, теперь, помимо основных свойств для фона, есть и дополнительные свойства, которые позволяют применять к фоновым изображениям эффекты наложения, похожие на эффекты, доступные в редакторах типа Photoshop — в частности, свойство background-blend-mode. Если вам интересно изучить всё о наложении в CSS, то можете прочитать об этом в этой статье.

Я надеюсь, что эта статья оказалась для вас полезной. Спасибо за чтение.

P.S. Это тоже может быть интересно:

Как установить адаптивное фоновое изображение для сайта

Я уже писал о том, что сейчас распространен такой элемент на сайте, как фоновое изображение. Чаще всего оно встречается продающих страниц, где располагается в шапке. Оно смотрится очень красиво, если, конечно, оно очень качественное и хорошо подходит к тематике сайта. Кстати, бонусом в этой статьей, в ее конце я расскажу где брать качественные изображения совершенно бесплатно и при этом они будут сделаны профессионалами.

Вот что еще есть по поводу адаптивных изображений для сайта:

Если Вы хотите сделать фон действительно неповторимым, тогда рекомендую следующую статью:

Как это выглядит смотрите на реальном примере:

Посмотреть примерСкачать

Ниже Вы можете увидеть как фоновое изображение адаптируется под различные устройства:

Как сделать адаптивное фоновое изображение для сайта?

HTML часть

Для данного примера мы будем задавать фоновое изображение для body, но подобным образом можно сделать для любого блока на странице. Поэтому ничего сверхъестественного в HTML структуре нет:

HTML КОД

<!Doctype html>
<html>
    <head>
        <title>Заголовок страницы</title>
    </head>
    <body>
        <!-- Здесь размещаете контент -->
    </body>
</html>

CSS часть

Осталось только задать в файле стилей необходимые свойства, чтобы сделать задуманное — адаптивное фоновое изображение для сайта:

CSS КОД

body {
    /* Путь к изображению относительно данного файла */
    background-image: url(../images/background-photo.jpg);
 
    /* Центрирование изображения по вертикали и горизонтали всегда */
    background-position: center center;
 
    /* Запрещаем повтор изображения */
    background-repeat: no-repeat;
 
    /* Фиксируем изображение - оно остается на месте при прокрутке окна */
    background-attachment: fixed;
 
    /* Изображение будет масштабироваться в зависимости от размеров контейнера */
    background-size: cover;
 
    /* Цвет фона изображения, который будет показываться пока изображение не загрузится */
    background-color:#464646;
 
    /* Эквивалентная сокращенная запись
    * background: url(background-photo.jpg) center center cover no-repeat fixed;
    */
}

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

Но это еще не весь код. Так как скорость мобильного интернета ограничены, поэтому страницу нам необходимо оптимизировать в скорости загрузки. На странице находится изображение, которое достаточно большое. Но можно сделать так, чтобы для мобильных устройств загружалось другое изображение, которое меньше.

Будем использовать Media Queries (Медиа запросы), которые позволяют задать отдельные свойства для произвольной ширины экрана:

/* Для мобильных устройств */
@media only screen and (max-width: 767px) {
    body {
        /* Если размер экрана меньше 767px показываем уменьшенное изображение,
        * которое на 77% меньше чем оригинальное для обеспечения быстрой загрузки 
        * на мобильных устройствах */
        background-image: url(../images/background-photo-mobile-devices.jpg);
    }
}

Что мы сделали? Если ширина окна браузера на устройстве будет менее 767 пикселей, то будем использовать другое изображение. Всё очень просто.

Бонус к статьей «Где брать фоновые изображения?»

Как и обещал в начале статьи даю Вам ссылку на очень качественный сервис, где Вы сможете подобрать фоновое изображение для своей продающей страницы. Он находится ЗДЕСЬ.

Вывод

Данный эффект очень актуален и его использование можно увидеть практически на каждой продающей странице.

Успехов!

С Уважением, Юрий Немец

Как добавить фон в css

При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

Работа с фоном в CSS

С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега . Рассмотрим все свойства, которые связаны с заданием фона.

background-color

Задаёт цвет фона. Его можно применять как к отдельным элементам

, так и ко всему веб-сайту с помощью тега .

background-image

Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

background-repeat

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

Оно может иметь несколько значений:

background-repeat: repeat-x — повторение по горизонтали;
background-repeat: repeat-y — повторение по вертикали;
background-repeat: repeat — повторение и по горизонтали и по вертикали;
background-repeat: no-repeat — изображение не повторяется.

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

background-attachment: scroll — фон прокручивается вместе со страницей;
background-attachment: fixed — фон остаётся неподвижным.

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .

background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

gradient

Плавный переход от одного цвета к другому, причем переходов допускается несколько.

Использование градиента можно наглядно продемонстрировать в примере кода:

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

Относительное изменение размера

Если применять проценты, размер будет основываться не на изображении, а на элементе.

То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

Масштабирование до максимального размера

В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

Такой фон страницы будет автоматически подгоняться под любое разрешение:

Заполнение фоном

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

Масштабирование сразу нескольких фонов

Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:

Создание полупрозрачного фона в CSS

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

Особенность данного свойства заключается в том, что прозрачность действует не только на фон, но и на все дочерние элементы. После увеличения прозрачности, и текст и фон станут полупрозрачными.

Пример создания полупрозрачного блока:

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

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

CSS свойства background используются для создания эффектов на заднем фоне страницы.

Список свойств для стилизации заднего фона, которые будут
рассмотрены ниже:

background-color
background-image
background-repeat
background-position

Добавление фонового изображения

Следующие правила добавляют цвет фона и фоновое изображение к элементу . Затем мы задаем для элемента

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

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

Если возникает вопрос зачем устанавливать цвет фона, когда используется фоновое изображение, то на него можно легко ответить: если по каким-либо причинам фоновое изображение не может быть загружено на страницу, в этом случае будет отображаться цвет фона.

Повтор фонового изображения

По умолчанию фоновое изображение повторяется по вертикали и по горизонтали заполняя таким образом все доступное пространство в элементе. Повтор фонового изображения можно переопределить с помощью свойства background-repeat, рассмотрим его возможные значения:

no-repeat – фоновое изображение не повторяется
repeat-x – повторяет фоновое изображение только по горизонтали
repeat-y – повторяет фоновое изображение по вертикали
repeat – фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)

Попробовать »

Позиционирование фонового изображения

По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (background-repeat: no-repeat;) или должно повторяться с определенного места, то можно использовать свойство background-position, чтобы указать в каком месте окна браузера или элемента оно должно быть размещено. Это свойство обычно принимает два значения, разделяемые пробелом. Первое значение – положение по горизонтали, второе – по вертикали.

Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

Попробовать »

Если будет указано только одно значение, то по умолчанию вторым значением будет center:

это то же самое что и:

Вы также можете использовать в качестве значений пиксели или проценты. Они определяют расстояние от верхнего левого угла окна браузера (или элемента-контейнера). Верхний левый угол соответствует значению 0% 0%.

Фиксация фонового изображения

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

Так как по умолчанию задний фон прокручивается вместе с содержимым, то в качестве примера мы зафиксируем наше фоновое изображение на одном месте с помощью значения fixed:

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

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

С помощью свойства background можно добавить несколько фоновых изображений к одному элементу. Для этого в качестве значения нужно указать список картинок, разделяя их запятой. Как и в случае с одной картинкой, к каждому фоновому изображению можно будет добавить дополнительные значения:

Добавление нескольких фоновых изображений поддерживается во всех новых версиях браузеров, включая IE9, однако следует учитывать, что в старых версиях браузеров, которые не поддерживают несколько фонов, правило для фона будет проигнорировано целиком.

Стоит отметить, что порядок указания картинок имеет важное значение. Первое добавляемое изображение будет отображаться над всеми остальными, последнее под всеми остальными фоновыми изображениями. Мы можем увидеть как это работает, если первым фоновым изображением задать картинку, которая не имеет прозрачных областей, в этом случае она будет перекрывать все остальные картинки, заданные для фона:

Если переставить наши картинки местами, сделав первую последней в списке, то она будет отображаться под всеми остальными изображениями, задавая основной фон для элемента:

Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.

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

Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.

Свойства фона html-элементов

Содержание:
1. Базовый цвет: свойство background-color
2. Источник изображения: свойство background-image
3. Укладка изображений: свойство background-repeat
4. Фиксация изображения: свойство background-attachment
5. Позиционирование изображений: свойство background-position
6. Область рисования: свойство background-clip
7. Область расположения фона: свойство background-origin
8. Размер изображений: свойство background-size
9. Краткая запись свойств фона: свойство background
10. Множественные фоны

1. Базовый цвет: свойство background-color

Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.

Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.

Свойство не наследуется.

background-color
Значения:
цвет	Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent .
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 1. Свойство background-color для разных элементов

2. Источник изображения: свойство background-image

Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.

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

Свойство не наследуется.

background-image
Значения:
изображение	Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none .
inherit	Наследует значение свойства от родительского элемента.

3. Укладка изображений: свойство background-repeat

Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.

Свойство не наследуется.

background-repeat
Значения:
repeat-x	Изображение повторяется в горизонтальном направлении. Вычисляется в repeat no-repeat .
repeat-y	Изображение повторяется в вертикальном направлении. Вычисляется в no-repeat repeat .
repeat	Изображение повторяется в обоих направлениях так часто, чтобы покрыть область отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется в repeat repeat . Значение по умолчанию.
space	Изображение повторяется столько раз, сколько оно помещается в области фона, не обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и последнее изображения касаются краев области. Если область рисования фона больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить область рисования фона. Если недостаточно места для двух копий изображения, то размещается только одно изображение, а свойство background-position определяет его положение. Вычисляется в space space .
round	Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь и не обрезаясь. Вычисляется в round round .
no-repeat	Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repea t.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 2. Свойство background-repeat

4. Фиксация изображения: свойство background-attachment

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

Свойство не наследуется.

background-attachment
Значения:
scroll	Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию.
fixed	Предотвращает перемещение, фиксирует фоновое изображение на заднем плане.
local	Фоновое изображение прокручивается вместе с содержимым элемента.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

5. Позиционирование изображений: свойство background-position

Если для элемента заданы фоновые изображения, свойство background-position указывает их начальное положение (после любого изменения размера) в соответствующей области расположения фона.

Свойство не наследуется.

background-position
Значения:
%	Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона – высота фонового изображения , где размер изображения — это размер, заданный свойством background-size . Значение по умолчанию 0% 0% .
длина	Значение длины дает фиксированную длину в качестве смещения.
left	Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края.
center	Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано.
right	Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края.
top	Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края.
bottom	Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Если указано только одно значение, второе значение считается center . Если заданы два значения в единицах длины или % , то первое значения представляет горизонтальную позицию, второе — вертикальную. Значения в единицах длины или % представляют смещение верхнего левого угла фонового изображения от верхнего левого угла области расположения фона.

Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.

Если заданы три или четыре значения в единицах длины или % , то перед каждым значением должно стоять ключевое слово, которое указывает, от какого края дается смещение. Если даны три значения, недостающее смещение считается равным нулю.

Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.

Рис. 3. Свойство background-position

Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:

Рис. 4. Фоновое изображение по низу блока

Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:

Рис. 5. Задание для блока нескольких фоновых изображений

6. Область рисования: свойство background-clip

Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.

Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.

Свойство не наследуется.

background-clip
Значения:
border-box	Фон закрашивает область в пределах рамки элемента. Значение по умолчанию.
padding-box	Фон закрашивает область в пределах внутренних полей элемента.
content-box	Фон закрашивает только область содержимого.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 6. Свойство background-clip

7. Область расположения фона: свойство background-origin

Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).

Свойство не наследуется.

background-origin
Значения:
padding-box	Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию.
border-box	Фон позиционируется относительно верхних границ рамки элемента.
content-box	Фон позиционируется относительно верхних границ области содержимого элемента.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Если для элемента установлено background-attachment: fixed , свойство не будет иметь эффекта.

Если для элемента заданы background-clip: padding-box , background-origin: border-box , background-position: top left , и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.

Рис. 7. Свойство background-origin

8. Размер изображений: свойство background-size

Свойство background-size устанавливает размер фоновых изображений.

Свойство не наследуется.

background-size
Значения:
auto	Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам.
длина	Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em .
%	Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном.
cover	Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain	Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 8. Свойство background-size

9. Краткая запись свойств фона: свойство background

Свойство background позволяет описать в одном объявлении следующие свойства фона: background-color , background-image , background-position , background-size , background-repeat , background-origin , background-clip и background-attachment . Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.

Если вы указываете в краткой записи фона свойство background-size , то его значения нужно будет записать через слеш / , чтобы отделить его от свойства background-position .

10. Множественные фоны

Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image . Значение none по-прежнему создает слой.

Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.

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

CSS свойство background. Фон для сайта // «Фрилансер по жизни»

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae, earum perferendis provident quaerat, veritatis, debitis repudiandae iste porro commodi dolorum. Soluta, cum incidunt, doloremque commodi odit maxime aut autem!

Tempore quaerat accusantium placeat autem! Aliquid optio dignissimos facere, consequuntur perferendis dolorem provident rem vel, dolorum repellendus veniam quia odit, nobis voluptatem excepturi est, necessitatibus et at. Expedita voluptate, excepturi.

Nemo libero, laboriosam perferendis saepe quis in quibusdam sed itaque tempora dolor temporibus ipsa officiis voluptatum quisquam, nostrum modi harum vitae officia. Facilis rerum ducimus dolores necessitatibus cum voluptate velit.

Cupiditate omnis similique magnam libero eligendi, nobis at minima quas dignissimos ipsum, vitae, explicabo, quibusdam hic. Quasi, ut, dolore! Odio reprehenderit nostrum consectetur nulla eius porro facilis, corporis ipsum! Fugit.

Omnis assumenda sapiente praesentium doloribus earum laboriosam, temporibus nihil reiciendis numquam aut accusamus hic possimus voluptatem incidunt voluptates molestiae, dicta impedit. Dolorum explicabo quos, provident, facilis dicta incidunt nobis delectus.

Omnis repudiandae in nulla, debitis at quo ut distinctio, porro adipisci voluptatibus fugiat ea tempore assumenda accusantium similique tempora eligendi ab aspernatur aut voluptas corrupti vero id harum. Quidem, voluptatibus.

Similique fugiat aut facilis veniam nesciunt iure eveniet, sequi debitis ducimus rem velit cum id voluptatum asperiores maxime veritatis reprehenderit expedita, labore obcaecati. Obcaecati eaque temporibus aperiam aut natus rerum.

Similique exercitationem error esse architecto ut expedita aliquam optio magni repellat, dolore facilis sit deleniti quae qui commodi autem, cumque blanditiis dignissimos nostrum non et amet delectus! Magni, quam, iusto.

Nisi neque fuga reprehenderit est? Culpa eos sunt tempore, optio cumque minima sit iste iure pariatur deserunt enim officia eum necessitatibus perspiciatis modi molestias consequatur accusamus, repellat aut consequuntur sed!

Saepe illo vel mollitia sunt, quod expedita maxime reprehenderit a ipsam vero aut labore nulla, necessitatibus, eaque inventore quaerat. Reprehenderit, natus. Excepturi asperiores, esse saepe numquam magni tempore hic, voluptatum.

Optio reprehenderit, fugit. Dignissimos saepe, eveniet quis quidem aliquam molestias labore voluptatum eligendi nesciunt iusto rem, inventore aperiam quisquam velit corporis sapiente sunt, aspernatur laboriosam, adipisci consectetur optio impedit corrupti.

Neque ipsum voluptatibus, vitae qui ullam, facere consequuntur cum quis eius, voluptate, fuga quas! Facilis voluptatem accusamus autem ratione, ab officiis dolor ad ullam veritatis vitae, perspiciatis iusto pariatur minus!

Nihil iste, ab repellat hic amet aliquam in sit repudiandae quia tempora, eum quaerat quas, quam beatae aspernatur. Ex officiis laboriosam numquam magni provident, obcaecati praesentium delectus reprehenderit libero autem.

Minus sunt, reiciendis est similique eveniet numquam iusto in placeat neque eaque laborum recusandae sapiente officiis vero rem obcaecati ab dolores. Natus repudiandae ad perferendis veniam similique id sed impedit!

Corporis dicta facere consectetur nam doloremque asperiores illum error suscipit vel nesciunt quasi blanditiis tempore eaque quam laborum eveniet quod nemo, pariatur omnis officiis, quaerat nobis? Eius neque commodi amet.

Voluptate hic non sint quidem amet ullam quod reprehenderit est molestias? Aut, voluptatum, exercitationem? Non dolore ratione aperiam repellendus sed fugiat necessitatibus quam, delectus cupiditate, dolorem neque vitae quidem doloremque!

Distinctio velit nobis officiis, sit quos cupiditate obcaecati accusamus illum et adipisci tenetur dolore ab dolores quis modi recusandae ut, eos cum minima commodi. Suscipit commodi, dolore consectetur iste nemo?

Velit corporis, rem tempora cum quasi dolor, neque impedit laboriosam dolores similique optio, eius, aperiam inventore dignissimos saepe. Similique vel aspernatur sit ea sunt veniam officiis fugit rem voluptates eum.

Dicta nesciunt dolores saepe repellendus officiis non explicabo placeat consequuntur inventore sint dolor debitis consectetur perferendis quod atque tempora dolorum molestiae, dignissimos praesentium fuga, a autem voluptate. Ullam aliquid, fuga.

Modi laudantium mollitia, fugit repellat. Molestias asperiores error omnis laboriosam expedita architecto quod vel doloremque rerum culpa ipsa reprehenderit similique aliquid ex facilis quidem aperiam deserunt, repudiandae porro dolore maxime.

Libero impedit quae optio quasi iste aperiam nam nostrum temporibus repellat obcaecati aspernatur repudiandae, eaque aliquam autem iure, molestias itaque similique adipisci eius aliquid ab esse delectus totam accusantium quis!

At possimus, iusto architecto minima atque a illum eos adipisci ut nesciunt, asperiores molestias ratione, eaque nihil placeat. Saepe facilis molestiae esse ipsa dolor ratione quisquam facere provident voluptates veritatis.

Non et, hic aperiam natus obcaecati, blanditiis maiores voluptates officia minus quibusdam dolore praesentium nam laboriosam earum provident reiciendis dicta explicabo vel itaque ut repellat iure, at, eos repudiandae! Autem.

Molestiae sed, ea quam veniam. Totam deleniti voluptatibus quae veritatis officiis blanditiis, temporibus in vel! Minus nesciunt qui optio aut quis alias non beatae. Molestias voluptate expedita consequuntur nisi iusto.

Tempora sed deserunt consequuntur, unde, id sequi ex illo sapiente at repellat laboriosam reiciendis voluptate maxime ratione cum in obcaecati inventore ad, odit neque fuga esse. Tenetur dolorem nam quia.

Illum numquam facilis ipsum quidem dicta perferendis nulla adipisci omnis in quam accusamus, corrupti iusto, unde soluta eum laborum vero fuga quia. Cum quas numquam reiciendis, rem non in tempore?

Aspernatur, laborum, repellendus? Officiis, quibusdam? Eius, perspiciatis officia recusandae pariatur reprehenderit delectus ipsa excepturi fugit minus, dolore dolorum amet sunt, iure aperiam autem explicabo sit odio nihil! Temporibus odit, debitis!

Dicta, magnam, fugit. Amet ducimus suscipit fugit esse eum, earum, reprehenderit, dolor, placeat sequi illum facilis consectetur quaerat quasi neque rerum. Velit sequi culpa, nulla quasi labore nisi obcaecati ipsam.

Pariatur itaque nemo mollitia officia, quaerat odio, ratione illum vero, eveniet sit incidunt facere atque saepe quos eum deleniti laudantium eaque earum veniam inventore minima repellat expedita voluptas. Quae, inventore.

Nostrum suscipit praesentium dolores veniam ullam quasi harum, voluptatum possimus maxime! Dolores, cumque quia aut vitae maxime. Non repellat maxime iure nemo voluptatum cum et odit harum omnis! Itaque, similique.

Repellendus similique et molestiae est necessitatibus voluptatum repellat assumenda, officiis doloremque, officia accusantium beatae provident deleniti, perspiciatis debitis ipsum culpa itaque sunt nisi impedit magni totam eveniet alias nihil rerum.

In asperiores nobis quas perferendis cupiditate molestias quod commodi tempore ea, voluptatum debitis saepe nemo nesciunt adipisci quam voluptatem inventore. Magni reiciendis itaque praesentium quod aliquam debitis nobis sequi ea.

Commodi iusto rem laboriosam, quam deleniti autem eligendi cupiditate ab, nesciunt placeat voluptate deserunt aspernatur eos iure voluptas! Nisi, nobis? Eum et, cum, expedita pariatur placeat possimus ad nulla necessitatibus!

Odio alias animi quis, minima nulla incidunt est vel, laborum hic maiores quia error consectetur assumenda atque, temporibus maxime corporis cum vitae commodi consequuntur beatae. Sint odio placeat culpa, hic.

Ipsum earum, fugiat illo, sint eos nostrum autem distinctio, fuga facilis, repellat cum! Maxime sint magnam repellat labore molestiae aliquam ipsa incidunt cumque quam harum officiis, voluptas, recusandae commodi! Aliquam!

Animi soluta reiciendis ullam, tempore inventore dolores illum nobis expedita ut, asperiores error nemo eveniet vero iste consequuntur facilis, porro consectetur repudiandae odit optio. Ipsa corrupti sapiente consectetur omnis, officia.

Commodi iste dolores natus, magnam, alias officia voluptatum quia unde corporis, ad vero! Consequatur iusto doloribus voluptates, sint, aliquid, odit quos aspernatur natus perspiciatis id recusandae doloremque voluptate, a accusantium.

Ea molestias quisquam at tempore ipsa laboriosam aspernatur, hic rerum iste molestiae minima vero voluptatem consequuntur corrupti neque eius iure animi id! Nostrum quia accusantium velit placeat nulla numquam ex?

Nobis eum, tenetur illo, architecto ex rem est, repellat nemo, consectetur asperiores deserunt esse doloribus quos eligendi. Et consequuntur, perferendis nostrum omnis porro neque quod voluptas facilis quibusdam corporis commodi.

Fugit quod eius maxime accusantium sequi officia quis voluptatum minus nesciunt at distinctio, vel id assumenda. Blanditiis ad laboriosam officiis illum quidem, itaque quibusdam dolore expedita, maiores repudiandae, odio voluptatum?

Magni minus incidunt, ipsa ipsum sed! Tempora, dolore magnam quaerat ipsa consequatur nesciunt temporibus eveniet enim obcaecati! Aperiam, reiciendis eos, dolor fugiat id quam iure quasi cupiditate fugit aliquid non.

Possimus esse, consectetur. Facilis dolorem dolore omnis consequatur. Excepturi aliquid repellendus quia commodi ipsum harum, necessitatibus modi, cumque nesciunt voluptatum tempora ipsa voluptatibus dolore fugiat porro possimus officia et ex!

Enim iste unde ea totam, fugiat dolores minus eius commodi quod, molestias quibusdam! Beatae rerum exercitationem aliquid, impedit doloribus minima officiis dignissimos, nobis optio fuga porro repellat sint obcaecati sunt.

Consequuntur, porro, distinctio atque velit fugit pariatur obcaecati nesciunt quod nisi quasi nihil! Vel laudantium rerum sapiente, mollitia quae iste eligendi sed repudiandae dolorum ipsum debitis omnis animi, molestiae suscipit.

Cupiditate expedita hic tempore voluptatum numquam voluptate, necessitatibus, quaerat in quasi voluptates atque, recusandae quae velit aliquam nam. Similique ab optio, ipsa. Nisi a tempora accusamus voluptatibus culpa laudantium cum.

Dolorum illo amet adipisci ab maxime saepe accusantium, inventore, asperiores, quod, doloremque officia eius magnam expedita? Voluptatem veniam similique nihil ut natus rem non eaque, aut sed repellendus voluptates fugiat!

Nesciunt quibusdam dolor, quasi reprehenderit deleniti officiis alias in, dolorem ea sint eaque sit, debitis harum! Animi tenetur aliquid non quae, in, quisquam maiores minima repudiandae corporis dignissimos asperiores, doloremque!

Inventore tenetur quibusdam debitis modi asperiores possimus excepturi tempora ea dicta ipsa explicabo veniam temporibus natus fugit corrupti dolores laboriosam ut, ipsam blanditiis quod. Reiciendis facere vero modi similique earum?

Illo corrupti repudiandae debitis dolores nesciunt quam, consequuntur quos facilis fugit quis laborum voluptatem. Quos recusandae, cupiditate, omnis alias dolorem quibusdam necessitatibus, architecto doloremque nulla libero corporis magni quo saepe!

Ratione dolore tempore ex alias, deleniti at aliquid porro, iure soluta excepturi hic dolorum nesciunt voluptate quasi ipsum molestiae ducimus et, vitae quae. Magni eveniet nemo aut similique commodi sequi.

Cum cumque autem natus a. Vel cupiditate eligendi, reiciendis rerum harum. Dolor libero recusandae rerum consequatur, dolorum obcaecati soluta quos cumque sit officia autem cum pariatur veniam, nihil saepe. Placeat!

Consectetur animi, fugit laboriosam iusto quod harum mollitia facilis saepe libero sequi fuga sed placeat dignissimos, quos a excepturi minima, corporis veritatis aut nesciunt. Illo pariatur velit iure suscipit sequi.

Inventore amet voluptates magnam facere nesciunt aspernatur laboriosam vero at libero consequatur a, maxime culpa, blanditiis consectetur quod adipisci ullam sed necessitatibus quidem, velit eos ipsa? Facere, possimus minima fugiat.

Officia eveniet nesciunt eius fuga, consequatur asperiores, at debitis. Quae amet velit fugiat. Rem nobis voluptatibus, illum blanditiis, corporis est dolor soluta quasi reiciendis inventore aspernatur unde non laudantium possimus.

Odio animi natus soluta, quod sed cum deserunt placeat deleniti perspiciatis. Ab rerum dolor architecto! Delectus, soluta laboriosam aliquid voluptatibus vero quod quam laborum. A harum, consequatur in necessitatibus excepturi!

Dignissimos laudantium deserunt quasi recusandae, nostrum voluptatum animi corporis eveniet corrupti iure voluptatibus esse dolore omnis dolorem necessitatibus impedit consequuntur earum. Dolor ad molestiae, odio nihil non hic, labore sit?

Magni adipisci nemo sint soluta necessitatibus, nisi eos aperiam similique nesciunt ab officiis maxime quo cupiditate. Esse eum id sunt totam sint accusantium iste eius asperiores maiores error! Amet, obcaecati.

Aspernatur voluptates sint ad dicta veniam. Provident distinctio sapiente numquam, laborum nobis itaque incidunt ipsam facilis, totam alias earum, tenetur corporis quaerat eveniet possimus iure unde quos hic eos minus.

Dolorem provident, similique sapiente ad animi sequi distinctio, aliquam at perspiciatis, maxime minima eveniet architecto. Adipisci iure incidunt atque fugit tempora cupiditate, voluptatem nihil delectus quaerat libero iusto quisquam dolores.

Voluptate hic incidunt excepturi, odit tempora commodi officiis autem in laboriosam sunt molestias, dolor quaerat enim pariatur eligendi repudiandae! Fugit quaerat facilis dicta laudantium reiciendis nobis velit sit nihil nostrum.

At architecto sint quidem perspiciatis numquam id vitae iste, ducimus consequuntur mollitia qui autem vero voluptates aut deserunt debitis obcaecati quis nobis magnam nostrum sunt velit assumenda commodi. Voluptatibus, dolor.

Reiciendis, repellat minus vero ipsam non iusto vitae explicabo temporibus saepe eum voluptatum libero! Aperiam aliquam nam temporibus harum porro deserunt natus dicta voluptate, eaque ut ex cupiditate modi odit.

Assumenda inventore autem quas at eaque saepe omnis iure delectus consequuntur minima ipsum eligendi, neque architecto aut incidunt corrupti. Deserunt nemo numquam, eum excepturi. Necessitatibus aspernatur facere ullam expedita tempore.

Dolore illum doloremque, sit, sed itaque, nam labore officia deserunt quidem veniam iure veritatis dicta! Debitis architecto, sed iure placeat, sapiente at itaque suscipit dolorem maiores, culpa assumenda corporis recusandae.

Eum libero inventore reprehenderit pariatur earum facere doloribus nam odio quas necessitatibus dolores dolore, tempore eos incidunt quaerat, non, fugiat debitis consequuntur ab saepe perferendis molestiae quos aspernatur! Ducimus, officia.

Incidunt eligendi optio, unde adipisci suscipit harum officia ullam quibusdam eius expedita ipsam reiciendis voluptatibus similique quidem cumque eum quasi fuga. Veritatis reiciendis quam laudantium ullam odio animi similique porro!

Eum magnam quasi, ratione sit assumenda. Voluptas distinctio, illo consequuntur nihil veniam doloribus dolor quisquam optio, accusantium dolorem. Distinctio error sit delectus, ab natus eveniet atque ipsam, molestias debitis eum!

Impedit quidem similique quos amet rerum, blanditiis, dolor eum natus nostrum facilis sit fuga dicta suscipit praesentium, adipisci nesciunt quibusdam laborum? Facilis facere voluptatum id eaque voluptatem maxime odio eveniet.

Nisi impedit omnis libero unde sapiente nihil repudiandae quaerat esse dicta iste deleniti, amet aliquam dolores temporibus aspernatur et mollitia sequi animi, iure debitis inventore? Natus inventore harum blanditiis aperiam.

Voluptates praesentium obcaecati maxime quasi similique pariatur accusamus ducimus hic ea adipisci. Maxime illo, modi id ratione illum labore ut omnis eos rem nesciunt molestias fugiat voluptas? Ex, eos, non!

Exercitationem aut totam quasi tenetur provident vitae id, obcaecati quo, labore sed iure laboriosam? Blanditiis, porro accusantium sunt eum, tempore maxime dicta quae perspiciatis praesentium, minima, odio aut placeat numquam.

Odit nemo distinctio, dolor, officiis repellat vitae quia sed corporis, pariatur fuga fugit. Nobis maiores eaque ullam, facilis culpa. Autem molestiae modi, necessitatibus mollitia quaerat eveniet beatae ratione animi veniam!

Laboriosam harum impedit, error, reprehenderit quod velit quisquam dolores. Adipisci, ea tempora praesentium tempore architecto, enim. Autem temporibus non quasi est, cumque quia velit. Ipsa, non, autem? Rerum, dolorem, deserunt.

Culpa, est voluptatibus blanditiis consequatur distinctio. Dolor harum vitae odit voluptatem beatae laborum. Amet facere, possimus ipsam eum, explicabo natus, quia vero sed omnis voluptates laudantium excepturi. Maxime, hic, vitae!

Eos hic, delectus cupiditate consequuntur minus sequi fuga error. Sed vero, ut modi possimus a voluptate iure, ducimus, dolor reprehenderit numquam unde voluptates dignissimos maiores consequatur similique, autem et in.

Distinctio atque ullam qui beatae minus explicabo non totam tempora illo id. Amet vitae modi error laboriosam, maiores possimus enim laudantium voluptatem molestias accusamus. Fuga quia a assumenda cumque autem!

Rem illum quis corporis quia quibusdam, voluptatibus odit quae non, voluptatem commodi, quos necessitatibus aut ipsa eaque ducimus modi. Facilis culpa voluptatibus tempore sed perferendis asperiores optio aspernatur, fuga recusandae!

Blanditiis asperiores omnis voluptatem reiciendis debitis accusamus eos ipsa quisquam, accusantium corrupti mollitia, dicta ipsam ut. Illum sint cum sunt veniam eos cumque, amet aperiam sequi id consectetur commodi deserunt.

Similique dolorum porro recusandae odit soluta reiciendis exercitationem quidem reprehenderit. Fugiat cum, exercitationem quis earum? Architecto, nobis officiis vitae illo hic explicabo quae fugit. Aut ullam laborum delectus minima inventore.

Sapiente delectus voluptatem eaque provident consequuntur ad adipisci beatae consequatur nulla repellat quasi sunt in, illum earum autem itaque quo debitis enim, dolorum nam cupiditate fuga? Aperiam, laudantium sit cumque!

Maxime vitae omnis illum blanditiis saepe, consectetur minima rerum facere tempora ipsum, asperiores sint dignissimos deserunt commodi totam quod minus molestias natus ab nulla nemo eius accusantium. Architecto, est facere?

Quaerat repudiandae dolorem culpa a voluptatum ipsa molestiae. Voluptate facilis suscipit repudiandae perspiciatis dolore ipsum quasi harum fugiat nisi. Exercitationem eveniet at ipsa quia distinctio natus est ullam, officiis molestias.

Magni adipisci illo voluptatibus ipsa, deserunt, officiis atque voluptate rerum natus nisi inventore similique! Eos nostrum dolorem eaque pariatur, neque architecto eius alias fugiat, dolor, nesciunt error? Amet pariatur, atque!

Sit earum molestiae quidem voluptas, distinctio ducimus dolore pariatur architecto nobis consequuntur sunt in voluptatum sapiente neque eligendi esse autem ab omnis, reiciendis hic similique labore. Eum reiciendis officiis, repellat.

Qui ratione assumenda fugit ipsam magnam nobis odit eaque quis ea reprehenderit accusamus, sapiente iusto rerum incidunt praesentium reiciendis eius suscipit! Reiciendis delectus quas officia ut laboriosam ea fugit, aliquam!

Nostrum autem quae rem, magnam fuga placeat rerum dolor odio minima maxime esse voluptatibus corrupti excepturi, enim impedit perferendis facilis! Ex sint, non voluptates totam deleniti temporibus suscipit impedit est.

Iste voluptate officiis at error dolorem natus repellendus labore nemo doloribus, molestias commodi sit. Soluta sed dolorem inventore, dicta enim sit, nostrum tempore vel vero explicabo quam iure ipsa reprehenderit.

Eos, enim exercitationem nam similique, quisquam odio. Harum mollitia iure ducimus recusandae autem quos placeat architecto repudiandae quisquam, nulla veniam, itaque quae fuga repellat adipisci porro vero! Ut, minus, iure?

Debitis, obcaecati ratione numquam itaque inventore. Aut quidem numquam, dolore, quisquam perspiciatis nihil, vel ipsa distinctio recusandae unde atque ipsum mollitia est quaerat? Error sunt assumenda consequatur, in possimus ullam.

Iure, quisquam odio! Ratione obcaecati aspernatur, suscipit eveniet. Soluta, et delectus. Nostrum aliquid, itaque iusto recusandae? Molestiae vitae et provident quaerat officia, in voluptatum, nihil maxime non dolorum architecto maiores!

Aspernatur ratione quisquam atque, odio omnis dolores quod aperiam quibusdam ducimus architecto sint voluptatibus in, esse facere magni mollitia eveniet laboriosam repellat saepe quaerat totam cum vel minus. Deserunt, fugiat.

Beatae esse, illo sunt, blanditiis, enim molestiae asperiores quo eos commodi dolores alias iusto, totam laborum dignissimos aliquam sit magni molestias tenetur officiis? Non, totam, repellat. Ratione, quae eligendi iste.

Perferendis doloribus, reprehenderit quisquam expedita eos esse doloremque nisi nesciunt necessitatibus architecto corporis quia ut obcaecati alias totam asperiores tenetur rerum officia est suscipit temporibus soluta fuga error incidunt. Perferendis.

Animi numquam rerum, laborum quod voluptatem. Aperiam tenetur quos assumenda quidem odit facilis. Adipisci iste, veritatis, quam at numquam omnis minus animi nisi neque aliquam vel sint, sunt amet rem!

Odio dolore, quos quaerat aut omnis maiores! Debitis quis soluta sequi sapiente eveniet ratione pariatur eius perferendis. Eligendi, rerum voluptatibus! Dolor illum eos totam assumenda, quisquam illo, modi vitae ipsa?

Itaque magnam omnis, veniam et accusamus obcaecati quidem, quasi voluptatibus magni distinctio aspernatur eos totam placeat labore alias fugiat neque ea similique blanditiis velit laudantium. Tenetur at voluptate, amet perferendis.

Obcaecati voluptatem laboriosam officia veritatis doloribus culpa beatae nobis ducimus corporis amet voluptate assumenda at dolore harum est quaerat modi, ut iusto nam laudantium nesciunt iure fuga nihil maiores? Molestiae!

Incidunt quas commodi inventore modi et ducimus similique assumenda rerum aperiam itaque facere laborum totam libero voluptatem minima, cupiditate perspiciatis, iusto, dolorum explicabo! Eum ipsam aut, inventore facilis cumque veritatis.

Aut tempora at eligendi obcaecati et sapiente veniam ex odio repellat laborum fugiat voluptatem, quam ratione consectetur consequuntur dignissimos aliquam, cum excepturi earum perferendis magnam cumque voluptatum dolorum? Nemo, natus.

Velit voluptates debitis a, earum ex expedita fuga laboriosam. Id facilis eaque perspiciatis doloribus nisi nesciunt dolor possimus suscipit quasi, cum. Architecto voluptate, odit obcaecati atque ea! Quasi, ut, provident?

Aperiam id tenetur laborum, delectus sit dolor quis blanditiis fugiat, quae consequuntur libero expedita suscipit culpa quas rem nihil tempore deleniti nesciunt debitis doloribus distinctio repudiandae officiis. Officiis, quaerat cum.

Doloribus fuga reiciendis, voluptate, tenetur possimus nihil debitis temporibus necessitatibus aperiam deserunt veritatis voluptatum incidunt fugit eos laboriosam a. Numquam officia ullam cupiditate fugiat natus optio delectus, reiciendis sunt obcaecati.

Sit quae aliquid omnis dolore vitae officiis iusto eveniet, nostrum, ducimus odio blanditiis dicta alias adipisci sed ipsum magni doloremque ex doloribus illum totam, natus possimus incidunt id. Recusandae, nesciunt!

Voluptas neque, distinctio ea. Aliquam vero, error officiis nobis consequatur est! Error perspiciatis quia modi sequi illum at, sapiente fugit unde ullam provident amet maiores excepturi nemo incidunt consequatur facilis?

Porro tenetur, mollitia facere, dolore tempore eius praesentium deleniti, dolorem assumenda eligendi perferendis! Blanditiis atque est expedita illum at ipsum, tenetur incidunt inventore a et nihil omnis, fuga iste sit.

Optio dolor autem odio nemo earum similique harum ad repudiandae facilis minima necessitatibus blanditiis temporibus, magnam repellat incidunt alias est eos ducimus ullam architecto. Suscipit ratione, velit maxime tempore praesentium.

Nobis iure laborum maiores, error ipsum ex quo nulla quas quibusdam, eius voluptas, dolore facere repellendus alias distinctio aliquid unde nesciunt, pariatur. Aliquid illum repudiandae, quisquam corporis, et ipsum recusandae?

Illum aliquam a, ab necessitatibus! Modi architecto rem quod quidem pariatur animi ad quisquam consequuntur a est totam tenetur deserunt distinctio ex amet voluptatibus quibusdam adipisci, ipsam. Autem numquam, non.

Ab soluta, praesentium nostrum aspernatur placeat modi porro aut maiores temporibus. Quidem id, suscipit ipsa ratione vero aut itaque sunt inventore enim saepe, minima ea vel! Reprehenderit cupiditate illum voluptate?

Quod numquam mollitia voluptate perferendis provident impedit dicta odit libero, obcaecati. In obcaecati aperiam nam ipsum, animi ab odit ipsa quidem doloremque, assumenda facere. Nulla officia, quas voluptatibus alias distinctio?

Officiis veritatis saepe nam neque cumque ipsa illum fugiat quis, rem repellendus quam temporibus ad! Porro quia architecto iure et libero doloribus corporis est perspiciatis, corrupti. Saepe vero voluptates ea.

Provident repellat non tenetur laborum atque eum voluptatem soluta consequuntur ipsam illum! Corporis sapiente voluptatum pariatur, quisquam, quo est ullam accusamus corrupti rem nulla ipsum nihil adipisci obcaecati repellat molestias?

Labore earum repellat dolorum aspernatur perspiciatis totam velit odio a itaque, nisi aperiam maiores fuga omnis perferendis architecto veniam ab consequuntur hic sequi, optio voluptates iste aut dolores. Accusamus, odit?

Saepe modi, inventore voluptatum sit facere incidunt quasi illo alias aliquam, vero quis molestias labore mollitia enim error minima quo ratione minus, natus. Sequi nostrum aliquam possimus ut, minus tempore!

Veniam laudantium reprehenderit adipisci optio magni, iure non quisquam voluptas illo ipsa. Nemo alias tenetur nihil magni, corrupti inventore in sit saepe quaerat deserunt quos, tempora ducimus, illo iusto maxime.

Odit officiis error fugit repellendus vel, voluptas nesciunt vero odio velit dolor consequatur et necessitatibus magni laboriosam non similique debitis quo, animi rem dolores. Debitis nam excepturi ipsum eius molestiae?

Odio adipisci et est aperiam at ut non explicabo ab ipsa illum! Illo sapiente ratione laborum placeat consectetur veniam dolores ex. Quisquam sapiente, laborum. Et assumenda ducimus quis quia facilis!

Explicabo reiciendis earum obcaecati modi, harum! Mollitia iste, aspernatur omnis velit atque! Ullam eveniet error debitis voluptates, alias, eaque architecto fugit accusantium. Praesentium eius consequuntur, ipsam reprehenderit excepturi! Voluptate, assumenda!

Ducimus ipsum pariatur, nesciunt molestias quae porro beatae quibusdam natus ab repellat repellendus enim accusantium praesentium molestiae, officiis ullam nobis eius commodi asperiores consequuntur deserunt. Aut autem tempora a, at.

Molestiae fuga aspernatur omnis voluptates, debitis atque dolores vero consectetur obcaecati porro maiores et cupiditate modi minus, dolorem dolor alias eligendi iste, cumque iusto! Id atque perferendis sed, voluptatibus fugiat.

Accusantium ipsam, reiciendis doloremque ipsa corporis similique. Tempore sit, molestias aliquid non incidunt rerum magnam at, laudantium minus dicta quam earum debitis animi placeat? Odio iure, a cupiditate possimus accusamus!

Incidunt, placeat autem nobis dolorum eaque libero ea non earum fugit nemo illo beatae labore distinctio architecto itaque. Repellat ipsam, earum maxime nesciunt laborum nisi minima iusto sed. Nulla, sit.

In recusandae soluta autem iusto voluptate eius iure repudiandae adipisci ex libero, ducimus provident, animi accusamus. Animi odio omnis at quidem magni veniam aut porro, voluptatem velit temporibus quis ipsa?

Itaque voluptatum, laboriosam nobis commodi eveniet. Reiciendis quia, illum ex. Nihil obcaecati deleniti, dolor debitis laboriosam atque fuga recusandae animi veniam harum tempore consequuntur! Dicta tenetur quo quaerat numquam omnis!

Beatae, libero, harum. Non error ut earum facilis, dolores modi beatae at magni deleniti quae tenetur excepturi optio distinctio inventore quod. Neque tenetur expedita saepe quis esse dolorem, animi voluptates.

Accusamus numquam quos dolor impedit molestiae dolorum cupiditate alias esse iusto assumenda deleniti repudiandae, ratione cumque mollitia quidem ex, molestias quam error tempore optio repellendus. Eos totam magnam soluta, odit.

A molestiae odio libero expedita voluptates distinctio nulla eius culpa provident eaque animi, soluta eos amet voluptas incidunt sunt in! Quisquam architecto deleniti, animi ipsum culpa itaque officia unde labore!

Itaque, aliquam, cupiditate. Rerum cum excepturi aliquam, minus facilis quod tempore ea modi commodi quaerat debitis deleniti est unde accusantium rem eos dicta placeat beatae, perferendis cupiditate dolor pariatur earum!

Eveniet provident dolores excepturi aperiam, fugit quia. Recusandae ullam minus facere dicta labore reiciendis porro, quia aliquam harum, nobis asperiores ratione quam. Voluptatem dolorem magni, suscipit est non, laudantium eius.

Exercitationem neque quo fugit dolorum nemo ea eius culpa nisi architecto quas illum harum commodi voluptatibus voluptates dolores veritatis aliquid rerum aspernatur quaerat ad nihil nesciunt laborum, illo quod vero.

Aperiam ipsa dicta quidem numquam! Explicabo quasi obcaecati aperiam aliquam odio nam, amet non nihil dolorem dolore. Non, iusto expedita, sapiente voluptatem corrupti deserunt consequuntur maiores magni, voluptas tempora quae.

Harum necessitatibus temporibus, odit. Obcaecati iure sed, soluta consequatur neque totam eos suscipit id! Cum repudiandae quos, doloremque cumque voluptatem deserunt porro odit harum nostrum, qui illo error consequatur quas!

Numquam sint architecto eaque dolorum nobis rerum, laborum ullam quam blanditiis ipsa pariatur esse illo cumque. Maxime, incidunt impedit doloribus hic quia similique autem nemo tenetur, veniam unde dolorem maiores.

Voluptas consequuntur, suscipit, ad quis quidem placeat libero tempora, veritatis, numquam quia nisi nam? Magni accusantium architecto porro quod voluptate minima facilis ducimus neque quidem hic ab animi aspernatur, non.

Eius veniam amet aliquam aperiam, temporibus, id distinctio quas sunt autem minima suscipit. Nihil iste, quam cupiditate, quidem odit animi, debitis illum odio voluptatibus officiis voluptate! Quaerat aliquid illum molestiae.

Incidunt distinctio molestiae inventore fuga earum mollitia error reiciendis obcaecati impedit labore recusandae, similique alias maxime, ipsum eos. Nemo dolor, nisi aut quo ex dolore, earum a enim possimus quibusdam.

Doloremque enim tempore numquam quo quasi quidem sed, reprehenderit tempora vero nobis aperiam saepe hic obcaecati voluptate fugiat ipsam esse dolor itaque illum sapiente perferendis eos aliquam. Minima, corrupti, dolorem.

Explicabo id aliquam est sed temporibus voluptatibus officiis, animi tempore fugit consequatur iure placeat deserunt minima, quibusdam magni vitae eum quidem iusto, praesentium aspernatur doloribus, sequi optio! Natus, sequi, consequuntur!

Voluptatibus numquam assumenda ex architecto, magni, et molestiae iure. Tenetur minus, dignissimos sapiente, nostrum, inventore in libero aliquam velit culpa, asperiores aliquid voluptas quibusdam molestiae possimus ex quia quam! Vel.

Vitae incidunt, ducimus neque! Incidunt libero facere officia, esse. Sapiente suscipit repellat distinctio quod, fugiat, iure animi, cum officiis modi libero eaque, ea perspiciatis blanditiis expedita consectetur quis? Sequi, soluta!

Nulla facere est repudiandae quos doloremque enim distinctio, beatae itaque adipisci similique, dolore temporibus, iste eaque? Dignissimos sapiente quos beatae odio debitis nemo! Veniam cupiditate fuga voluptatibus, alias ipsa et.

Necessitatibus, iste numquam dignissimos tempora sint saepe, vero deserunt illum. A pariatur illo nihil consequuntur blanditiis iusto, sit atque hic sint velit consequatur deleniti, magnam adipisci incidunt voluptatem, maiores amet!

Mollitia, hic repudiandae laudantium. Ratione earum dolor quam eum labore magni quasi, praesentium maxime laudantium non unde asperiores placeat perspiciatis obcaecati dolorem aliquid, repellendus omnis dolore iure assumenda! Cumque, repellendus.

Libero voluptatem repudiandae enim molestiae perspiciatis, ab ipsam consectetur sed quam itaque similique, eligendi error ullam perferendis mollitia, nisi quaerat tempora. Eligendi repudiandae cumque, minus qui veritatis odit necessitatibus voluptatibus!

Eaque temporibus aperiam quibusdam unde voluptatum culpa molestias facilis voluptatem, doloribus consequatur saepe reprehenderit amet, consequuntur fugiat doloremque! Voluptates dignissimos beatae laboriosam ea, molestiae amet blanditiis voluptatem architecto illum aspernatur.

Dignissimos distinctio velit, laboriosam aliquam. Magnam nobis dolor magni optio, dolorem eius consectetur similique rerum facilis eos voluptatem tempora beatae dignissimos ut eligendi, culpa omnis quasi accusamus quis vel consequuntur!

Omnis, non, impedit ipsa unde esse hic voluptatibus quam, reiciendis minima obcaecati illum quisquam amet optio vel quos cumque, praesentium temporibus exercitationem iusto voluptatem suscipit. Libero perferendis temporibus, quas rerum.

Deserunt neque ducimus perspiciatis officia! Maxime consectetur esse, nesciunt doloremque nemo rem rerum quod molestias fuga nulla odit officiis incidunt ratione aperiam maiores itaque! Unde officiis, nemo ipsam expedita ipsa!

Obcaecati pariatur dolore, iure quae itaque cumque totam voluptate beatae temporibus, alias quia odio eius minima corporis molestias ab excepturi recusandae cupiditate dolor doloribus labore sapiente quibusdam, ipsam ratione. Totam.

Quam reiciendis, eveniet. Dicta accusamus blanditiis labore excepturi vero eos iste esse ab quasi corporis nobis magnam, iusto aliquam sequi hic ullam. Accusamus unde voluptatem veritatis, voluptates! Incidunt ducimus, harum.

Затемнение изображений простым и быстрым способом на чистом CSS

Этот способ можно считать несколько устаревшим из-за наличия режимов наложения фона, хотя режимы наложения не поддерживаются во всех версиях браузеров Internet Explorer и Edge, многих мобильных браузерах и только частично поддерживается в браузерах Safari, так что этот способ можно использовать как обходной путь.

В CSS нет возможности напрямую задать прозрачность фону, но есть простой способ для имитации этого с помощью множественных фоновых изображений. Этот способ основывается на том, что свойству фонового изображения можно задать цвет, в том числе и в формате rgba, который включает значение прозрачности.

Размытие фона можно использовать для усиления контраста между текстом и изображением, находящимся за ним. Конечно, можно уменьшить прозрачность изображения, обработав его в программе PhotoShop, но для этого обычно нужно многократное повторение подбора цветов в программе-редакторе изображений и проверки получившегося результата в браузере, в то время как изменение значений в коде CSS требует намного меньше времени и усилий.

Фоновое изображение до затемнения

В записи свойства множественных фоновых изображений первым идет самый верхний фон, так что составная фотография, выполненная Thomas Shahan, располагается последней:

h2 {
        font-family: Calluna Sans, Arial, sans-serif;
        color: #fff;
        margin-top: 0;
        background: linear-gradient(rgba(0,0,0,0.5),
         rgba(0,0,0,0.5)),
          url('bugs.jpg');
        font-size: 5rem;
        padding: 2rem;
        text-align: center;
        background-repeat: no-repeat;
        background-size: cover;
        word-spacing: 5rem;
}

Применим этот код CSS к коду HTML ниже:

<h2>Бешеный жук</h2>

И получим результат, показанный далее. Изменение затемнения фонового изображения достигается просто увеличением последнего значения (alpha), которое задает прозрачность, в записи цвета фона в формате rgba.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

Фоновые изображения

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

К счастью, свойство background всех их объединяет.


body {
   background: white url(http://www.site.com/images/bg.gif) no-repeat top right;
}

Здесь объединяются следующие свойства:

background-color – фоновый цвет, о котором мы уже говорили ранее.
background-image – месторасположение файла изображения.
background-repeat – определяет шаблон мозаичного размещения фонового изображения. Может иметь следующие значения: repeat (выкладывает изображение мозаикой по всему фону элемента), repeat-y (изображение повторяется в вертикальном направлении), repeat-x (изображение повторяется в горизонтальном направлении), no-repeat (будет отображаться только один экземпляр изображения).
background-position – определяет положение фонового изображения. Может иметь значение top, center, bottom, left, right, либо процентные значения, либо сочетание этих значений.

Фоновые изображения можно использовать с любыми элементами HTML, а не только с целой страницей (элемент body), что позволяет создавать простые, но яркие эффекты, вроде угловых теней.

Очень просто увлечься фоновыми изображениями и начать лепить их везде, где только можно. Некоторые визуально эмоциональные люди могут полагать, что будет здорово прицепить в качестве фона какую-нибудь пеструю фотографии, забывая о том, что пользователям сайта приходится угадывать, напрягая зрение, что же такое там написано. Это пример крайности. И стоит помнить, что самым дружественным к пользователю является черный шрифт на белом фоне или белый шрифт на черном фоне (есть, правда, предположение, что не совсем белый или не совсем черный фон лучше, так как такое сочетание цветов не слепит).

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

Типы представления Вверх Краткая запись свойств CSS

CSS-фоновых изображений и специальных возможностей

Было множество статей, в которых обсуждались фоновые изображения и их доступность. Кажется, не существует однозначного решения для всех браузеров и обсуждения всех текущих методов в одном месте.

Выпуск

Фоновые изображения CSS часто используются вместо встроенных изображений, поскольку их можно использовать в качестве карт спрайтов CSS. Карта спрайтов — это способ использования одного изображения и отображения только небольшой части этого изображения в виде определенного значка или элемента страницы, например вкладки страницы.Поскольку отправляется только одно изображение, оно быстрее, чем множество небольших изображений, и может повысить производительность страницы.

Основная проблема с не декоративными фоновыми изображениями CSS заключается в том, что при выключении изображений или включении режима высокой контрастности (например, в ОС Windows) фоновые изображения исчезают. Если фоновое изображение содержит текст, как в случае вкладок страниц, или содержит значимые изображения значков, то пользователи режима высокой контрастности и пользователи без изображений не увидят этот контент.Хотя это может повлиять только на пользователей программ чтения с экрана, для пользователей программ чтения с экрана это легче решить, если использовать атрибут title в ссылках на изображения и текст вне экрана внутри контейнеров, содержащих фоновые изображения.

Сравнение со встроенными изображениями

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

Требования

Для изображений текста — для чего этот метод часто используется — существует четкое требование WCAG 2 уровня AA не использовать изображения текста, когда текст может быть отображен технологической платформой. Для веб-приложений текст почти всегда может быть создан, за исключением шрифтов, которые могут отсутствовать в пользовательских системах. В этих случаях можно использовать технику стиля Куфон. Проблема все еще остается для изображений, которые не являются текстовыми, но имеют смысл, и проблемы по-прежнему актуальны для других требований доступности, таких как Раздел 508.

Решения

Невозможно просто скрыть текст за чем-либо, поскольку фоновое изображение CSS является фоновым изображением, и поэтому никакая установка его непрозрачности не приведет к закрытию текста в элементе, который его содержит. Есть несколько возможных концептуальных решений.

Не использовать фоновые изображения

Просто замените недекоративный фон CSS стандартными встроенными изображениями. Это решение не решает проблему производительности, но предоставляет доступное решение, а именно то, сколько сайтов было отображено за последние 15 лет.

Позиционирование частей встроенного изображения

Не использовать фоновые изображения — используйте встроенные изображения, но с помощью CSS, чтобы расположить только ту часть изображения, которую вы хотите видеть в нужных элементах. В основном это включает в себя создание карты спрайтов встроенного изображения. Информацию об этой технике можно найти в статье TJK Design CSS Sprite.

Использовать до или после псевдоэлементов

Для отображения изображений могут использоваться псевдоэлементы. Этот метод отлично подходит для изображений, чтобы они оставались на экране, но не поддерживается некоторыми браузерами, в основном Internet Explorer 7.Информацию об этой технике можно найти в блоге Paciello Group. Кроме того, псевдоэлементы не могут быть выбраны.

Используйте холст HTML 5

Элемент холста можно использовать для отображения изображения и размещения холста поверх текста внутри элемента. Это метод, который Cufon использует при поддержке HTML 5. В противном случае Cufon использует VML для визуализации пользовательских шрифтов. Cufon разбивает каждое слово на отдельный элемент span, и, таким образом, одним из побочных эффектов использования Cufon является то, что текст может быть разбит на части при чтении с помощью программы чтения с экрана.

Использование уловки позиционирования CSS

Можно разместить фоновое изображение как дочерний элемент (но поверх) элемента, содержащего текстовый эквивалент. Затем сделайте размер родительского элемента шириной изображения. Когда фоновые изображения отключены, текст появляется в некоторых браузерах, и текст также будет доступен для программ чтения с экрана.

Похоже, что этот метод не работает в разных браузерах одинаково. Firefox по-прежнему отображает текст поверх фонового изображения, в то время как Internet Explorer скрывает текст за изображением.Хотя в режиме высокой контрастности Internet Explorer не отображал текст должным образом.

Заключение

В заключение, единственный метод, который действительно доступен и поддерживается почти всеми браузерами, — это использовать встроенные изображения вместо фоновых изображений CSS для отображения недекоративного содержимого. Если требуются спрайт-карты, рассмотрите возможность использования встроенных спрайт-карт.

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

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

Использование фоновых изображений CSS · Документы WebPlatform

Сводка

В этой статье подробно рассматриваются фоны CSS: цвет фона, изображение, повторение, вложение и положение. Ближе к концу он также рассматривает передовые методы, такие как спрайты CSS.

Введение

Признайся! С момента появления первой статьи в учебной программе по веб-стандартам вы были взволнованы, узнав, как сделать свой сайт ярким и потрясающим. Может быть, вы даже перешли к этому разделу?

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

Как вы ранее узнали из предыдущей статьи в этой серии, одно из наиболее важных изменений, которое приходит с CSS, — это возможность отделить представление , или то, как все выглядит, от семантики , или того, что означают вещи. Фоновое изображение CSS является одним из наиболее важных инструментов, имеющихся в вашем распоряжении, поскольку оно позволяет применять декоративные изображения к определенным частям вашего HTML, не добавляя лишнего веса вашему HTML. Раньше авторы (как и вы!) Были вынуждены заполнять свой код тегами img для достижения того же эффекта.

CSS и, в частности, свойство background избавят ваш HTML от беспорядка в презентации. Редизайн и другие изменения в жизни сайтов, построенных с использованием современных методов, могут быть выполнены гораздо более эффективно. Вы можете обновить свой сайт, изменив только таблицу стилей, вместо того, чтобы перекодировать каждую HTML-страницу. В зависимости от размера вашего сайта это может существенно сэкономить время.

Из этой статьи вы узнаете, как работают фоновые изображения CSS.Вы увидите, как применить фоновое изображение с помощью CSS, настроить его размещение, расположить мозаику по вертикали или горизонтали и объединить фоновые изображения с помощью CSS-спрайтов для повышения производительности сайта.

Как это работает?

CSS для фона разделен на несколько различных свойств. Используя эти свойства, такие как позиция и цвет , вы можете начать управлять внешним видом своей страницы. В этой статье вы подробно рассмотрите фоновые изображения CSS, шаг за шагом создавая предупреждающее сообщение в качестве примера.

Во-первых, просмотрите различные свойства, которые вы можете использовать.

Свойства фона

`цвет фона`	Устанавливает цвет фона элемента HTML.	Есть несколько способов указать `background-color` , включая значения RGB и ключевые слова. Большинство людей используют шестнадцатеричное представление, символ решетки (#), за которым следуют шесть символов. Первая пара указывает на красный уровень, а вторая и третья — на зеленый и синий уровни соответственно — `#RRGGBB` . Многие инструменты выбора цвета помогут вам найти шестнадцатеричное представление данного цвета. Чистый красный цвет, например, будет # FF0000. Допустимые значения включают значение `, цвет,` , `, прозрачный,` или `, наследуемый` .
`изображение`	Указывает путь или URL фонового изображения.	Установите `background-image` , указав браузеру, где найти изображение, используя URL-адрес.Например; `URL (alert.png)` . Обратите внимание, что путь предваряется ключевым словом `url` и заключен в круглые скобки. Этот синтаксис важен для понимания браузером того, что вы хотите указать местоположение. Если ваш URL-адрес содержит специальные символы или пробелы, вам, возможно, придется использовать апострофы или кавычки вокруг URL-адреса внутри круглых скобок. Допустимые значения: `URL` , `нет` или `наследует` .
`повтор`	Указывает, в каком направлении следует расположить фоновое изображение.	Изображения можно расположить по вертикали, горизонтали или по обоим направлениям, чтобы заполнить всю ширину или высоту элемента HTML. Используйте `background-repeat` , чтобы указать браузеру повторять фоновое изображение. Допустимые значения включают `повторение` , `повторение-x` , `повторение-y` и `без повторения` .
`насадка`	Задает поведение фонового изображения при прокрутке пользователем.	Изображения могут либо прокручиваться вместе с содержимым, либо оставаться на месте на экране просмотра. Допустимые значения: `scroll` , `fixed` и `наследуются` .
`позиция`	Сообщает браузеру, где разместить фоновое изображение.	Изображения могут отображаться в любом месте в пределах HTML-элемента, к которому они применяются. Используйте `background-position` , чтобы точно разместить изображения для визуального эффекта и наложения слоев. Есть много полезных способов указать положение фона, ключевые слова и числовые значения. Ключевые слова (например, `верхний` и `нижний` ) очень полезны и легко читаются. Значения пикселей очень точны, но они не адаптируются к изменению высоты и ширины. Отрицательные значения пикселей полезны при использовании спрайтов CSS, как вы увидите позже. Когда используются проценты и пиксели, отправной точкой всегда является верхний левый угол элемента HTML, хотя способ позиционирования изображения работает с пикселями и процентами несколько иначе.Пиксели всегда перемещают изображение на заданное количество пикселей вниз и вправо от содержащего поля (или вверх и влево, если они имеют отрицательные значения), независимо от размера изображения и содержащего поля. С другой стороны, проценты перемещают изображение на процент разницы между размером содержащего поля и размером изображения. Если изображение и содержащее его поле имеют одинаковый размер, проценты не будут перемещать изображение вообще. Допустимые значения включают длину `,` (обычно в пикселях), `процентов,` (ширины элемента) и ключевые слова: `верхний` , `правый` , `нижний` , `левый` и `центральный` .Обратите внимание, что центр может использоваться для обозначения как вертикального, так и горизонтального центра. Также обратите внимание, что вы можете смешивать проценты и пиксели в правилах, но не ключевые слова и пиксели или ключевые слова и проценты.
`фон`	Сокращенное свойство, которое может использоваться для описания всех других свойств в одной строке.	Сокращенные свойства действительно очень хороши. Большинство разработчиков используют их, чтобы сделать CSS как можно более компактным и сгруппировать связанные свойства.Вы можете написать общее правило, используя сокращение, а затем при необходимости переопределить его конкретными свойствами. Свойства всегда должны указываться в одном и том же порядке, чтобы браузеры могли легко интерпретировать предполагаемые стили: `цвет` `URL` `повтор` `насадка (используется очень редко; может быть опущена)` `горизонтальное положение` `в вертикальном положении` Пример этого сокращения со всеми используемыми свойствами (кроме приложения ) выглядит следующим образом: `фон: зеленый URL (логотип.gif) без повтора слева вверху;`

Создание предупреждающего сообщения

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

Конструкция

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

Обратите внимание, что в макете есть одна строка текста, но в будущем она может содержать больше. Один из самых важных навыков веб-разработчика — предвидеть, как будет развиваться дизайн. Часть уважения к художественному видению сайта — это постоянство от запуска до редизайна. Таким образом, предупреждающее сообщение может содержать более одной строки текста или даже несколько абзацев, списков или других элементов HTML. Стремитесь быть как можно более элементарным агностиком.Это увеличит вероятность повторного использования кода и позволит вам сделать сайт максимально быстрым и эффективным. Макет выглядит, как на Рисунке 1.

Рис. 1. Макет окна предупреждения, сделанный графическим дизайнером.

Разработчик также предоставил значок, который мы должны использовать, как показано на рисунке 2.

Рисунок 2: Значок предупреждения.

Код

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

После создания окна предупреждений следуйте пошаговым инструкциям, приведенным ниже. Каждый снимок экрана содержит ссылки на примеры кода, поэтому вы можете проверять исходный файл на каждом этапе. Поэкспериментируйте с кодом, увеличивая или уменьшая значения, и попробуйте альтернативы. Вы также можете продолжить, записывая каждую новую строку кода в таком инструменте, как Opera Dragonfly или Firefox Firebug, чтобы вы могли сразу увидеть результаты каждого шага.

Создание ловушки или селектора CSS.

Сначала вам нужно создать оповещение класса , которое позволит вам подключить код CSS. Создайте новые файлы скелетов CSS и HTML, свяжите таблицу стилей CSS с файлом HTML и добавьте в каждый из них следующий код:

Скопируйте следующий CSS и вставьте его в таблицу стилей:

  .alert {...}

Скопируйте следующий HTML-код и вставьте его в HTML-документ:

  
   Внимание!  Здесь находится текст нашего предупреждающего сообщения.

Приведенный выше код задает для предупреждения стиль class , а не id , потому что это дает возможность для более одного предупреждения на странице. Например, вы можете добавить предупреждения к элементу формы с несколькими потенциальными ошибками. Цель состоит в том, чтобы сделать ваш CSS максимально гибким и ограничить элементы в соответствии с дизайном при создании содержимого HTML.

На данный момент у вас есть прочная основа, но предупреждение по-прежнему выглядит как обычный абзац, потому что вы еще не добавили никаких стилей.Далее вы добавите несколько правил для его стилизации.

Примечание. Я намеренно выбрал , а не , чтобы ограничить класс предупреждения параграфами; окна предупреждений могут легко содержать и другие элементы. Вы должны оставить как можно больше гибкости в своем CSS.

Добавление цвета фона

Вы уже узнали об использовании цвета фона в обработке текста в Стилизация текста с помощью CSS . Те же принципы применимы к любому элементу HTML и могут быть объединены с фоновыми изображениями для создания визуальных эффектов.Если цвет фона не задан и не унаследован, он по умолчанию прозрачный.

Как показано ниже, вы можете добавить светло-оранжевый цвет фона к окну предупреждения, чтобы выделить его среди текста вокруг него. Важно не делать цвет фона слишком темным, потому что вам нужно поддерживать разумный уровень контраста между текстом и цветом фона. Добавьте в правило CSS следующее свойство:

  .alert {
  цвет фона: #FFFFCC;
}

Окно предупреждения теперь выглядит так, как показано на рисунке 3.

Рисунок 3: Окно предупреждения с добавленным цветом фона.

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

Затем вы можете добавить фоновое изображение к предупреждению. Путь к фоновому изображению должен быть заключен в url () , как показано в приведенном ниже коде. Добавьте выделенную строку в правило CSS:

  .alert {
  цвет фона: #FFFFCC;

  
  фоновое изображение: URL (alert.png);
}

Окно предупреждения теперь выглядит, как на Рисунке 4.

Рисунок 4: Фоновое изображение было добавлено, но мозаика выглядит неправильно.

Помните, что каждое свойство фона имеет значение по умолчанию — если вы не указали значение, будет применено значение по умолчанию. Обратите внимание, что изображение покрывает все предупреждение, как мозаика на полу кухни. Какой вывод? По умолчанию фоновые изображения повторяются как по горизонтали, так и по вертикали. Повторяющийся фон особенно полезен для градиентов и узоров, заполняющих экран или конкретный элемент HTML, но в данном случае желателен эффект , а не .

Контрольный повтор фонового сигнала

Рис. 5. Как и фоновое изображение, эти плитки повторяются как по горизонтали, так и по вертикали.

Чтение спецификаций, конечно, может быть пугающим, но спецификация — действительно хорошее место, чтобы выяснить, как должен работать CSS , прежде чем углубляться в бесчисленное множество различий между браузерами. Прочтите часть спецификации W3C, посвященную цветам и фону, и попытайтесь найти ключевое слово, которое будет использоваться, когда вы не хотите, чтобы фоновое изображение повторялось.Эта стратегия используется в примере ниже:

Обратите внимание, что есть раздел для каждого свойства фона, включая повторение фона. В поле Значение отображаются все возможные варианты, включая: repeat , repeat-x , repeat-y , без повтора и наследуют . По умолчанию ( начальных ) фоновые изображения повторяются. Направление не указано, это означает, что изображение будет мозаичным как по горизонтали, так и по вертикали.Вы, вероятно, догадались, что no-repeat — это значение, которое нужно установить, чтобы изображение не было мозаичным в любом направлении. Добавьте следующую выделенную строку ниже в правило CSS:

  .alert {
  цвет фона: #FFFFCC;
  фоновое изображение: URL (alert.png);

  
  фон-повтор: без повторения;
}

Окно предупреждения теперь выглядит, как на Рисунке 6.

Рисунок 6: Окно предупреждения с единственной копией фонового изображения (без мозаики).

Кроме того, вы можете выбрать повторение в обоих направлениях (например, кухонная плитка) или в любом направлении. Градиенты часто повторяются по горизонтали или вертикали (см. Рисунок 7). Вам не нужно знать размер HTML-элемента; вы просто вырезаете часть своего градиента и настраиваете его повторение в желаемом направлении; либо x для горизонтали, либо y для вертикали. Узоры часто повторяются в обоих направлениях, а значки обычно не повторяются. Вы изучите background-repeat далее в следующем примере.

Рис. 7. Зеленовато-желтые плитки в этом примере повторяются только по горизонтали.

Затем взгляните на практический пример с моего сайта. Рисунок 8.

Рисунок 8: Повторяющийся пример с моего веб-сайта.

CSS, который я использовал для добавления этого декоративного эффекта, относительно прост. Я сделал фон повторяющимся по горизонтали, используя repeat-x :

  корпус {
    
    фон-повтор: повтор-х;
  }

Приложение

Атрибут вложения позволяет указать, как будет вести себя фон, когда пользователь прокручивает страницу вниз.Поведение по умолчанию — scroll , что заставляет фоновое изображение прокручиваться вместе с содержимым.

С другой стороны, установка background-attachment на fixed приводит к тому, что элемент застревает в окне браузера, поэтому он остается на том же месте при прокрутке содержимого внутри элемента, к которому он прикреплен. Это создает некоторые странные эффекты, которые будут очевидны только при прокрутке прикрепленного HTML-элемента. W3C использует его для обозначения статуса своих спецификаций.Например, изображение «Рекомендация кандидата W3C» вверху слева. Прокрутите страницу вниз и обратите внимание, что изображение остается в верхнем левом углу. Он прикреплен к элементу body , поэтому всегда виден.

Этот шаг не повлияет на наш дисплей, потому что браузеры по умолчанию устанавливают фоновые изображения для прокрутки, но все равно добавляют это в код, чтобы узнать, как используется свойство. Добавьте выделенную строку в правило CSS:

  .alert {
  цвет фона: #FFFFCC;
  background-image: url (alert.png);
  фон-повтор: без повторения;

  
  фон-вложение: прокрутка;
}

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

Рисунок 9: Дисплей не изменился.

Размещение изображения

Позиционирование — это точная настройка, которая позволяет размещать фоновые изображения именно там, где нужно, как по горизонтали, так и по вертикали внутри элемента HTML. Это свойство принимает ключевые слова и числовые значения, такие как сверху , по центру , справа , 100% , -10% , 50px и -30em .

На рисунке 10 показаны значения, которые вы можете использовать для размещения фоновых изображений в разных положениях.

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

Приведенный ниже код позиционирует фоновое изображение. Цель состоит в том, чтобы расположить его в верхнем левом углу, но не касаться сторон, поэтому вам нужно сместить его на 10 пикселей как сверху, так и слева. Это достигается путем добавления следующей выделенной строки в правило CSS:

 .тревога{
  цвет фона: #FFFFCC;
  фоновое изображение: URL (alert.png);
  фон-повтор: без повторения;
  фон-вложение: прокрутка;

  
  background-position: 10px 10px;
}

Первое значение — это смещение по горизонтали, второе — по вертикали. В этом случае значения такие же. После внесения этих изменений ваше окно предупреждения должно выглядеть, как на Рисунке 11.

Рисунок 11: Использование CSS-позиционирования для установки местоположения фонового изображения.

Совет. Выберите ключевые слова или числовые значения, но не объединяйте их.Старые браузеры могут игнорировать ваше объявление, если вы используете оба сразу. При использовании справа и снизу достигается тот же эффект, что и при использовании 100% по горизонтали или вертикали, соответственно.

Используем стенографию, чтобы собрать все вместе, как профессионал

Как вы узнали, некоторые свойства CSS можно сгруппировать. Фон и все его подсвойства можно сгруппировать в правилах CSS. Код CSS, описанный до сих пор, можно переписать в сокращенной форме следующим образом:

 .тревога{
    
    фон: #FFFFCC url (alert.png) прокрутка без повтора 10px 10px;
  }

Совет: при группировании подсвойств фона всегда располагайте свойства в следующем порядке. Это важно как для кроссбраузерной совместимости, так и для организации и обслуживания таблиц стилей:

цвет
изображение
повтор
насадка
горизонтально положение
вертикально положение

Попробуйте заменить старый код CSS в своем документе сокращением, показанным выше.После обновления пример должен выглядеть точно так же (см. Рисунок 12).

Рисунок 12: Сокращение работает как шарм!

Экспериментируя с кодом

Лучший способ запомнить все нюансы CSS — это проверить параметры самостоятельно. Попробуйте изменить некоторые свойства в примере и посмотрите, как разные значения влияют на отображение. Установите background-position на 100% 100% и обратите внимание, что это дает тот же результат, что и использование ключевых слов right и bottom .А если вы измените его на -5px 0 ? Как вы думаете, почему часть изображения скрыта?

Контроль качества

Тестирование чрезвычайно важно для обеспечения хорошего взаимодействия с пользователем. Тот факт, что сайт хорошо выглядит на вашем компьютере с вашей конкретной конфигурацией, не означает, что он будет хорошо выглядеть в каждом браузере. При тестировании окна предупреждений выполните следующие основные минимальные шаги:

Увеличьте или уменьшите количество текста внутри предупреждения.
Увеличьте размер текста в браузере как минимум на два уровня.Определите, лучше ли использовать em для позиционирования нашего изображения. Проверьте, что происходит, когда вы увеличиваете размер текста.
Примените предупреждение класса к другим элементам, таким как div , p , ul , strong или em . Как можно изменить код, чтобы сделать класс независимым?
Включите несколько абзацев и список в предупреждение. div . Код все еще работает?
Визуально проверьте предупреждение в браузерах уровня 1 (также известных как браузеры уровня A).Мой совет — написать код для хороших браузеров, а затем адаптировать его для Internet Explorer — когда код заработает.

Строгое тестирование — это часть обучения написанию CSS. Чем внимательнее вы будете учиться, тем быстрее сможете писать код.

Спрайты

Пользователи хотят все. Они хотят, чтобы ваш сайт был гламурным, интерактивным и быстрым. Однако включение большого количества фоновых изображений CSS может значительно замедлить работу вашего сайта. Чем больше HTTP-запросов вы сделаете, тем медленнее будет работать ваш сайт (HTTP-запрос возникает всякий раз, когда ваш компьютер обращается к веб-сайту, и ему необходимо попросить сервер отправить ему другой ресурс в дизайне сайта, такой как файл CSS или изображение … каждый дополнительный запрос означает более длительное время загрузки сайта).

Чтобы обойти это ограничение, вы можете объединить связанные значки в одно изображение, известное как CSS-спрайты. Свойство background-position позволяет вам затем разместить изображение в соответствующих позициях, чтобы значки отображались в окне элемента HTML, к которому прикреплены спрайты CSS.

Обратите внимание, что на рисунке 13 для отображения значка Земли в окне HTML вы можете разместить изображение, используя слева вверху . Чтобы переместить изображение таким образом, чтобы отображался значок предупреждения, положение фона необходимо изменить на -80 пикселей 0 .Отрицательное значение по горизонтали смещает изображение влево.

Рисунок 13: Использование CSS-спрайтов для уменьшения количества HTTP-запросов.

Примечание. Если вы установите отрицательное положение фона, Safari будет повторять ваше изображение, даже если вы указали без повтора . Это необходимо учитывать, когда вы начинаете работать с фоновыми изображениями для создания более сложных макетов.

Пример сложного спрайта и фонового изображения

Затем посмотрите, как можно использовать спрайты CSS.Предположим, дружелюбный дизайнер прислал нам новый макет. Это иллюстрирует список ссылок на целевой странице блога. Он указывает на профиль блоггеров в LinkedIn, RSS-канал, фотографии Flickr и закладки. При оценке каждой ссылки обратите внимание на градиент, начинающийся в центре с белого цвета и переходящий к серому вверху и внизу ссылки. И чтобы еще больше усложнить ситуацию, дизайнер спросил, можем ли мы сделать каждую ссылку простой белой без кривой, когда посетители наводят курсор на ссылку, как показано на рисунке 14.

Рисунок 14: Макет нового дизайна.

Логотипы могут быть включены с использованием img элементов в разметке. Однако использование CSS-спрайтов — гораздо лучшее решение. Спрайты загружаются быстрее, потому что должно загружаться только одно изображение (а не четыре), и это очищает ваш HTML, уменьшая количество необходимой разметки.

Создание спрайта

Первый шаг включает вырезание четырех логотипов и создание набора спрайтов, как показано на рисунке 15.

Рисунок 15: Набор спрайтов.

Также необходимо вырезать часть градиента шириной 1 пиксель. Для наглядности я вырезал немного больший фрагмент, но в реальном проекте сайта вам понадобится только изображение в один пиксель (см. Рисунок 16).

Рисунок 16: Срез, используемый для градиентного фона.

HTML-код, который создает список, представляет собой неупорядоченный список, содержащий ссылки. Обратите внимание на пустые элементы , охватывающие , внутри ссылок. Очень важно не устанавливать фиксированные значения высоты и ширины для элементов, содержащих текст.В конце концов, вы не представляете, насколько большим будет текст. Что будет, если сайт переведен на немецкий? Вы можете использовать эти дополнительные промежутки для отображения логотипов. В качестве альтернативы вы можете решить, что не хотите, чтобы посторонняя несемантическая разметка загромождала ваш HTML. В этом случае вам нужно будет использовать спрайт большего размера и оставить пробел между значками. Имейте в виду, что эта стратегия медленнее для пользователей с медленным подключением, особенно для тех, кто использует мобильные телефоны для просмотра сайта. Код для списка показан ниже.Скопируйте его, а затем вставьте в документ HTML:

  
    
       Резюме 
    
    
       RSS-канал 
    
    
       Фотографии 
    
    
       Ссылки

Добавьте следующий CSS-код в новый CSS-файл и свяжите его с HTML-документом:

 .навигация, .navigation li {
  маржа: 0;
  отступ: 0;
}

.navigation li {
  border-top: сплошной белый 1px;
  тип-стиль-список: нет;
}

.navigation li a {
  фон: # E2E2E2 url (sprite_gradient_bkg.jpg) repeat-x левый центр;
  отступ: 20 пикселей;
  дисплей: блок;
  семейство шрифтов: Arial, Helvetica, sans-serif;
  цвет: # 333;
  размер шрифта: 18 пикселей;
  текстовое оформление: нет;
}



.navigation li a: hover, .navigation li a: focus {
  фон: прозрачный - нет;
}

CSS использует оба фоновых изображения.Во-первых, взгляните на фоновое изображение градиента. Следует отметить три интересных момента:

Изображение повторяется по горизонтали ( repeat-x ). Эта мозаика позволяет растянуть такое маленькое изображение по всему списку.
Изображение центрируется по вертикали. Вы хотите, чтобы круглая часть изображения появлялась в середине элемента списка, поэтому вы должны использовать позицию фона слева по центру .
В CSS я применил цвет фона того же серого, что и серый на градиентном изображении.Это гарантирует, что если элемент вырастет, он не будет выглядеть сломанным. Для получения дополнительной информации об этой технике я рекомендую прочитать Bulletproof Web Design Дэна Седерхольма.

Последняя строка означает, что элемент не должен отображать цвет фона или изображение, когда посетитель наводит на него курсор или фокусируется на элементе с помощью клавиатуры. Вам может быть интересно, почему я применил свойства фона к ссылке, а не к элементу списка. Ответ заключается в том, что Internet Explorer 6 и более ранние версии не поддерживают псевдоклассы, такие как hover , для элементов, отличных от ссылок.Я внес изменения в код, чтобы учесть это ограничение.

Затем вы можете создать CSS для маленьких логотипов. Как обычно, вы можете начать с определения наиболее общего случая для всех элементов span в вашем навигационном модуле. Именно здесь вы определяете изображение, которое будет использоваться для всех промежутков, настройку повтора и положение фона (каждое из них отличается, поэтому вы можете использовать первое). Вы можете использовать сокращенное обозначение этого правила. Обратите внимание, что комментарии CSS делят разделы нашего кода на управляемые фрагменты.Добавьте следующий код в конец файла CSS:

 

.navigation span {
  фон: url (sprite_logo.gif) без повтора слева вверху;
  высота: 15 пикселей;
  ширина: 15 пикселей;
  поле справа: 20 пикселей;
  дисплей: -moz-inline-box;
  дисплей: встроенный блок;
  вертикальное выравнивание: средний;
}

После завершения базового форматирования теперь вы можете определить исключения, или , что отличает от каждого конкретного логотипа. В этом случае изменяется только CSS background-position .Для каждого соответствующего элемента списка необходимо, чтобы изображение было перемещено на 15 пикселей влево, потому что каждое из изображений логотипа имеет ширину 15 пикселей. Добавьте в конец файла CSS следующее:

 

#rss span {
  background-position: -15px 0;
}

#photos span {
  background-position: -30px 0;
}

#links span {
  background-position: -45px 0;
}

Этот пример поначалу может показаться устрашающим. Сосредоточьтесь на фоновых изображениях. В этом случае при использовании отрицательного значения пикселя фоновое изображение смещается влево, так что отображается соответствующая часть изображения.Положительные значения перемещают фоновое изображение вниз и вправо, а отрицательные значения перемещают изображение вверх и влево.

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

Использование

  от 10.02.2014 в 15:00 по центральному времени:

hoffmant99 внес незначительные изменения, чтобы пример спрайта работал, хотя учащийся (читатель этой страницы) должен знать, что имена файлов не совпадают.Это можно исправить локально, изменив имя с «sprite_logo» на «sprite_l» и «sprite_gradient_bkg.jpg» на sprite_g.jpg ».

См. Также

Внешние ресурсы

Изображение предоставлено

Вопросы к упражнению

Размер абзаца составляет 40 на 180 пикселей, а размер фонового изображения — 60 на 200 пикселей. Вы увидите изображение целиком или только его часть? Почему?
Вы хотите, чтобы изображение располагалось в нижнем левом углу элемента blockquote — введите правильные значения.
```
  blockquote {background: yellow url (quote.png) no-repeat scroll ____ ____;}
  
```
Допустим, вы хотите, чтобы к каждому h3 в вашем документе с классом «вопрос» применялся градиентный узор. Вы бы использовали repeat-x , repeat-y , no-repeat или repeat для достижения чего-то похожего на пример ниже? Почему?

Каким будет фоновая позиция примера в вопросе номер 3? Как можно творчески использовать цвет фона, чтобы он мог расширяться до любой высоты? Почему это важно?
Какое сокращение можно использовать для удаления всех свойств фона?
Какова цель CSS-спрайтов?

Оптимизация фоновых изображений CSS с помощью медиа-запросов

5 марта 2020 г. • Обновлено 5 марта 2020 г.

Появляется в: Быстрое время загрузки

Многие сайты запрашивают большие ресурсы, такие как изображения, которые не оптимизированы для определенных экранов, и отправлять большие файлы CSS, содержащие стили, которые некоторые устройства никогда не будут использовать.Использование медиа-запросов — популярный метод доставки адаптированных таблиц стилей и ресурсов на разные экраны для уменьшения объема данных, передаваемых пользователям, и повышения производительности загрузки страниц. В этом руководстве показано, как использовать медиа-запросы для отправки изображений, размер которых не превышает необходимого, метод, широко известный как отзывчивых изображений .

Предварительные требования #

В этом руководстве предполагается, что вы знакомы с Chrome DevTools. При желании вы можете использовать DevTools другого браузера.Вам просто нужно сопоставить скриншоты Chrome DevTools в этом руководстве с соответствующими функциями в выбранном вами браузере.

Ознакомьтесь с адаптивными фоновыми изображениями #

Сначала проанализируйте сетевой трафик неоптимизированной демонстрации:

Откройте неоптимизированную демонстрацию на новой вкладке Chrome.
Нажмите Control + Shift + J (или Command + Option + J на Mac), чтобы открыть DevTools.
Щелкните вкладку Сеть .
Обновите страницу.

Вы увидите, что единственное запрошенное изображение — это background-desktop.jpg , размер которого составляет 1006KB :

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

Вы можете увидеть стили, управляющие фоновым изображением, в style.css:

  body {
 background-position: center center; 
 background-attachment: исправлено; 
 фон-повтор: без повтора; размер фона: обложка; 
 background-image: url (images / background-desktop.jpg); 
}

Вот значение каждого из используемых свойств:

background-position: center center : центрировать изображение по вертикали и горизонтали.
background-repeat: no-repeat : показать изображение только один раз.
background-attachment: fixed : Избегайте прокрутки фонового изображения.
background-size: cover : Измените размер изображения, чтобы покрыть весь контейнер.
background-image: url (images / background-desktop.jpg) : URL-адрес изображения.

В сочетании эти стили говорят браузеру адаптировать фоновое изображение к разной высоте и ширине экрана. Это первый шаг к созданию отзывчивого фона.

Использование одного фонового изображения для всех размеров экрана имеет некоторые ограничения:

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

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

Использование медиа-запросов — распространенный метод объявления таблиц стилей, которые будут применяться только к определенным типам носителей или устройств.Они реализуются с помощью правил @media, которые позволяют вам определять набор точек останова, в которых определены определенные стили. Когда выполняются условия, определенные правилом @media (например, определенная ширина экрана), будет применена группа стилей, определенных внутри точки останова.

Следующие шаги можно использовать для применения медиа-запросов к сайту, чтобы использовать разные изображения, в зависимости от максимальной ширины устройства, запрашивающего страницу.

В стиле .css удалить строку, содержащую фоновое изображение URL:

  body {
 background-position: center center; 
 background-attachment: исправлено; 
 фон-повтор: без повтора; размер фона: обложка; 
  background-image: url (images / background-desktop.jpg);  
}

Затем создайте точку останова для каждой ширины экрана на основе общих размеров в пикселях, которые обычно имеют экраны мобильных устройств, планшетов и настольных компьютеров:

Для мобильных устройств:

  @media (max-width : 480px) {
 body {
 background-image: url (images / background-mobile.jpg); 
} 
}

Для планшетов:

  @media (min-width: 481px) и (max-width: 1024px) {
 body {
 background-image: url (images / background-tablet.jpg); 
} 
}

Для настольных устройств:

  @media (min-width: 1025px) {
 body {
 background-image: url (images / background-desktop.jpg); 
} 
}

Откройте оптимизированную версию style.css в своем браузере, чтобы увидеть внесенные изменения.

Изображения, используемые в оптимизированной демонстрации, уже изменены, чтобы соответствовать разным размерам экрана.Отображение того, как изменять размер изображений, выходит за рамки этого руководства, но если вы хотите узнать больше об этом, руководство по обслуживанию адаптивных изображений охватывает некоторые полезные инструменты, такие как пакет Sharp npm и интерфейс командной строки ImageMagick.

Измерение для разных устройств #

Затем визуализируйте получившийся сайт на экранах разных размеров и на смоделированных мобильных устройствах:

Откройте оптимизированный сайт на новой вкладке Chrome.
Сделайте область просмотра узкой (менее 480 пикселей ).
Нажмите Control + Shift + J (или Command + Option + J на Mac), чтобы открыть DevTools.
Щелкните вкладку Сеть .
Обновите страницу. Обратите внимание, как запрашивалось изображение background-mobile.jpg .
Расширьте область просмотра. Как только он станет шире 480px , обратите внимание, что запрашивается background-tablet.jpg . Как только он станет шире 1025px , обратите внимание, что запрашивается background-desktop.jpg .

При изменении ширины экрана браузера запрашиваются новые изображения.

В частности, когда ширина ниже значения, определенного в мобильной точке останова (480 пикселей), вы увидите следующий сетевой журнал:

Размер нового мобильного фона на на 67% меньше, чем у рабочего стола.

Сводка #

В этом руководстве вы научились применять медиа-запросы для запроса фоновых изображений, адаптированных к конкретным размерам экрана, и экономии байтов при доступе к сайту на небольших устройствах, таких как мобильные телефоны.Вы использовали правило @media для реализации адаптивного фона. Этот метод широко поддерживается всеми браузерами. Новая функция CSS: image-set (), может использоваться для той же цели с меньшим количеством строк кода. На момент написания этой статьи эта функция поддерживается не во всех браузерах, но вы, возможно, захотите следить за тем, как развивается принятие, поскольку она может представлять интересную альтернативу этому методу.

Последнее обновление: 5 марта 2020 г. Улучшить статью
Как ускорить фоновые изображения
Фоновые изображения обычно используются там, где есть текст или контент сверху.Это может быть слайдер, тематическое изображение сообщения в блоге (как показано ниже) или изображение главного героя.
Скорее всего, они загружаются медленно и могут повлиять на взаимодействие с пользователем из-за увеличения самой большой Contentful Paint (LCP), если они находятся в указанной выше области.
Почему фоновые изображения медленные?
Запросы с низким приоритетом
Если изображение находится внутри внешнего файла CSS, оно будет загружено только после загрузки и анализа файла CSS и когда класс CSS фактически используется в HTML.
Это может отражаться в вашей основной метрике веб-жизненно важных функций, например, Крупнейшая Contentful Paint (FCP) , если эти фоновые изображения находятся в указанном выше сгибе.
Если это тег IMG, изображение загружается сразу после анализа HTML.
Трудно отложенная загрузка и предварительная загрузка
Теги
IMG могут использовать отложенную загрузку в собственном браузере, для которой не требуется JavaScript.
Вы все равно можете отложить загрузку фоновых изображений, если они в HTML как встроенный стиль.Плагины, такие как FlyingPress, автоматически обнаруживают и загружают их с отложенной загрузкой.
Однако, если фоновое изображение находится во внешнем файле CSS или во внутреннем, все будет сложно, так как мы не сможем понять, есть ли у элемента HTML фоновое изображение или нет.
Примечание. Если вы используете FlyingPress, у нас есть вспомогательный класс « lazy-bg» для отложенной загрузки фоновых изображений даже внутри файлов CSS.
Как ускорить фоновые изображения?
Использовать тег IMG с подгонкой объекта
Фоновые изображения обычно используются в слайдерах с некоторым текстом / содержимым в центре, или у вас есть фиксированный div, и вы хотите разместить изображение, которое будет «заполняться» без изменения размера области ( background-size: cover ).
Раньше было очень сложно добиться этого с помощью тегов IMG. Так что использование фоновых изображений имело смысл.
Однако есть новое свойство CSS object-fit: cover , которое дает те же преимущества. Поддержка браузера тоже хороша.
Предварительная загрузка фонового изображения
Используете ли вы фоновое изображение или тег IMG, если изображение находится в верхнем сгибе, предварительно загрузите это изображение. Предварительная загрузка указывает браузеру загрузить это изображение с высоким приоритетом.
Тег IMG со взломом «display: none»
Фоновые изображения могут использоваться вместе с background-color , background-repeat , background-attachment , background-position и background-blend-mode и т. Д.
Таким образом, в некоторых ситуациях лучше использовать фоновое изображение вместо тега IMG, чтобы использовать другие свойства CSS.
Вы можете добавить обычный тег IMG с отображением : нет . Это скажет браузеру немедленно загрузить изображение, но отобразить его с использованием фонового изображения.
Добавить адаптивные изображения
Вы добавляете набор параметров и размеры к обычным изображениям для доставки адаптивных изображений в зависимости от устройства:

Аналогичным образом вы можете сделать то же самое для фоновых изображений, используя набор изображений :
В противном случае вы получите одинаковое большое изображение для MacBook с разрешением 2880 пикселей и iPhone 6s с разрешением 750 пикселей!
Встроенное фоновое изображение в HTML
Если ваше фоновое изображение во внешнем файле CSS, встроите его в HTML.Таким образом, браузеру не нужно ждать загрузки этого CSS-файла, а затем загружать изображение.
Дополнительная литература
Почему я не могу редактировать и изменять фоновое изображение? — База знаний BlueConic
Чтобы иметь возможность редактировать изображение, оно должно быть частью HTML-источника позиции, которую вы редактируете. Хотя в этом есть смысл, это не всегда очевидно. Например, с помощью CSS (каскадной таблицы стилей) изображения могут отображаться в местах, где фактический исходный HTML-код вообще не содержит изображения.
Вы можете отредактировать исходный HTML-код позиции, чтобы увидеть, не происходит ли каких-либо уловок CSS с помощью редактора HTML.
Например, если HTML выглядит так …

Lorem ipsum dolor sit amet, conctetur adipiscing elit.

… и вы можете только редактировать текст, тогда, по-видимому, магический класс «background-image» заставляет изображение появляться позади текста.
В приведенном выше примере, если вы хотите изменить фактическое изображение, измените атрибут «src» тега «img» на URL-адрес другого изображения. Просто убедитесь, что URL-адрес изображения общедоступен, другими словами, изображение должно быть загружено на общедоступный веб-сайт.
Иногда в исходном HTML-коде вообще нет тега img:

Lorem ipsum dolor sit amet, conctetur adipiscing elit.

В этом случае изображение доставляется через класс CSS «background-image», а URL-адрес изображения является частью самой таблицы стилей.BlueConic не может редактировать саму таблицу стилей, поэтому в этом случае нет возможности редактировать изображение.
Суммируем:
Если вы не можете редактировать изображение с помощью встроенного редактора, попробуйте редактор HTML.
В редакторе HTML вы не можете загрузить изображение, поэтому вам придется использовать URL-адрес существующего изображения.
Если редактор HTML не содержит URL-адреса изображения для редактирования, изображение, вероятно, обслуживается через CSS и не может быть отредактировано.
фоновых изображений электронной почты: как удивить подписчиков (+ код)
Электронные письма могут казаться немного предсказуемыми с изображением здесь, блоком текста там … Один из способов оживить впечатления подписчиков? Фоновые изображения.Они неожиданные и добавляют новое измерение вашему дизайну, делая ваши электронные письма «популярными». Когда все сделано хорошо, ваша электронная почта будет казаться миллионной, но ее невероятно легко осуществить.
Продолжайте читать для:
Что такое фоновые изображения? (А в чем смысл?)
Фоновые изображения — это изображения, которые применяются к фону или позади элемента. Вместо того, чтобы быть центральным элементом электронного письма, как изображение героя, они чаще тонкие и дополняют другой контент в кампании.
Основным преимуществом использования фоновых изображений является то, что они позволяют размещать поверх них дополнительный HTML-контент. В отличие от других изображений, где в этом пространстве может существовать только само изображение, фоновые изображения предоставляют возможности наложения слоев, поэтому вы можете иметь дополнительные изображения, текст или призывы к действию (CTA), существующие в том же пространстве.
Использование живого HTML-текста поверх фонового изображения вместо того, чтобы включать этот текст как часть изображения, означает, что ваше сообщение будет читаемым, когда изображения отключены, что делает это отличным методом для создания более удобных и доступных HTML-сообщений электронной почты.
Фоновые изображения не только помогают создавать кампании, которые улучшают восприятие чтения, но и предлагают множество возможностей дизайна, выделяя вашу кампанию среди конкурентов.
Креативные способы, которыми бренды используют фоновые изображения
Миро разместил фоновое изображение с фигурами позади своего главного раздела, привлекая внимание к основному заголовку и сообщениям электронного письма, которые наложены с использованием живого текста.
Источник: Really Good Emails
Uplers использовал фоновое изображение, чтобы выделить скидку на свои услуги, с изображением купона, помещенным за кодом купона.
Источник: Really Good Emails
Figma добавила тонкий повторяющийся фоновый узор в тело этого письма, знакомя нас с их новым продуктом в виде белой доски. Их узор перекликается с фоном продукта.
Просмотрите это письмо в Litmus Builder
Chipotle поместил гигантское фоновое изображение позади этого впечатляющего гигантского героя и области тела, включая фотографию продукта и узор из линий. Поверх этого изображения у них есть анимированный GIF с прозрачным фоном и живой текст в области основного текста.
Источник: Really Good Emails
. Анимированные GIF-файлы также можно использовать в качестве фоновых изображений, как в этом примере из Adobe Stock , рекламируя праздничные коллекции с основным контентом, включая живой текст и кнопку с призывом к действию, размещенную поверх анимированного фона.
Источник: Really Good Emails
Рекомендации по дизайну
Размышляя о внедрении фоновых изображений, стоит принять во внимание некоторые конструктивные особенности.
Контраст
Чтобы все читатели понимали ценность контента, наложенного на фоновые изображения, важно помнить о контрастах.Относитесь к изображению так же, как к однотонному цвету, и сравните цвета изображения с цветами содержимого.
Если вы разрабатываете с использованием Figma, вы можете добавить плагины, такие как Color Blind и Contrast, чтобы увидеть, соответствуете ли вы рекомендациям по доступности веб-контента (WCAG). Существует также ряд веб-приложений, например, средство проверки контраста WebAim, где вы можете тестировать цвета в своих проектах.
Простота
Еще один способ обеспечить удобочитаемость — упростить задачу.Занятый фон может затруднить восприятие любого живого текста, который вы размещаете на своем изображении. Поэтому часто бывает полезно рассматривать фоновое изображение как улучшение, а не функцию.
Сплошной резервный цвет
Поскольку не все почтовые клиенты поддерживают фоновые изображения, создайте сплошной резервный вариант. Подписчики, использующие почтовые клиенты, которые не поддерживают ваши изображения, могут по-прежнему пользоваться сплошным цветом. Обязательно выберите резервный цвет, который соответствует вашему дизайну и хорошо контрастирует с его элементами переднего плана.
Как кодировать фоновые изображения в электронном письме
Прежде чем я перейду к коду, давайте посмотрим, какие клиенты будут отображать фоновые стили CSS, а какие нуждаются в помощи запасного варианта VML.
Хорошие новости: Улучшена поддержка встроенного фонового CSS, теперь клиенты веб-почты полностью поддерживают этот метод, а это означает, что атрибут фонового HTML больше не требуется.
Плохая новость: К сожалению, Почта Windows 10 не любит фоновые изображения.Он не отображает встроенный CSS или устаревший атрибут фона HTML. А применение VML вызовет проблемы с рендерингом с сообщением об ошибке «изображение не отображается».
Поддержка фоновых изображений в почтовом клиенте
Почтовый клиент
Использование встроенного CSS
Использование VML
Apple Mail 14
✓
✘
Office 365 (Mac)
✓
✘
Office 365 (Windows)
✘
✓
Outlook 2016 (macOS 10.12,6)
✓
✘
Outlook 2013, 2016, 2019 (Windows 10)
✘
✓
Почта Windows 10
✘
✘
Приложение Gmail (Android 10)
✓
✘
Приложение Gmail (iOS 13.4.1)
✓
✘
Outlook (Android 7.0)
✓
✘
Outlook (iOS 12.0)
✓
✘
Samsung Mail (Android 7.0)
✓
✘
iPad 11 Air (Gen 4 iOS 14.2)
✓
✘
iPhone 12 (iOS 14.2)
✓
✘
Почта AOL (Edge)
✓
✘
Gmail (Chrome)
✓
✘
Office 365
✓
✘
Outlook.com
✓
✘
Yahoo! Почта
✓
✘
Какие почтовые клиенты используют ваши подписчики?

Взгляните на свою долю рынка почтовых клиентов с помощью Litmus Email Analytics. Посмотрите, для каких почтовых клиентов вам нужно оптимизировать фоновые изображения.(Подсказка: если у Windows 10 Mail низкий уровень заряда, не переживайте.)
Узнать больше →
Теперь, когда мы разобрались с этим, давайте поговорим о коде!
Одна из забавных вещей в использовании фоновых изображений в ваших электронных письмах заключается в том, что есть несколько способов добиться этого. Вы можете заполнить небольшой раздел или закрыть тело письма, использовать одно изображение или повторяющийся узор, и вы можете переключать фоновые изображения в зависимости от того, находится ли ваш читатель на настольном компьютере, мобильном телефоне, в светлом режиме, темном режиме или даже они нависают над вашим изображением.
Для каждого метода нужен свой подход, поэтому давайте рассмотрим лучшие способы их кодирования.
Заданное по ширине или фиксированное фоновое изображение
При применении фоновых изображений всегда лучше добавлять код в ячейку содержащей его таблицы. Применение к любому другому элементу HTML, такому как
или, вряд ли получит поддержку со стороны некоторых почтовых клиентов. Вот как это должно выглядеть:
Расширенное управление фоновыми изображениями с помощью CSS • Code The Web
Фоновые изображения могут сделать больше, чем вы думаете — узнать о классных способах управления фоновыми изображениями с помощью CSS…
Начало работы
Я думаю, что лучше всего учиться на практике, поэтому я настоятельно рекомендую следовать всем своим урокам.Чтобы продолжить, начните с создания новой папки проекта с файлами index.html и style.css в ней. Добавьте следующий код в свой index.html :
Расширенные фоновые изображения CSS ДЕМО Фоновые изображения
Изображение, которое я буду использовать для демонстраций в этой статье, следующее:
И добавьте background-image к элементу body в вашем стиле .css file:
body { высота: 150vh; background-image: url ('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/mountains.jpg'); }
Если вы не знаете, как использовать свойство background-image , сначала проверьте здесь — я буду здесь, когда вы вернетесь!
Причина, по которой корпус имеет высоту , заключается в том, что мы можем прокручивать нашу страницу — вы увидите, почему это актуально позже в руководстве. 150vh в основном означает 150% высоты окна просмотра.
Когда вы открываете HTML-файл в браузере, он должен выглядеть так:
Если ваш файл выглядит правильно, давайте продолжим!
Помимо свойства background-image , существует множество свойств, которые изменяют способ отображения background-image :
background-size
background-position
background -повторять
размер фона
В этой статье я рассмотрю каждый из них по отдельности… Давайте приступим!
background-size
Помните исходное изображение?
Однако на нашей странице небо очень увеличено!
Это связано с тем, что по умолчанию для фонового изображения установлены фактические размеры изображения ( 4272 пикселей, на 2848 пикселей, )
Давайте исправим это!
Свойство background-size может иметь значение , покрывающее , , содержащее или любое значение единицы (например. 1500 пикселей ).
background-size: cover устанавливает размер изображения так, чтобы оно покрыло весь элемент (в данном случае тело ).
background-size: contain гарантирует, что все background-image отображаются внутри элемента.
В этом случае мы хотим использовать cover — таким образом мы можем видеть большую часть изображения, но оно будет покрывать весь экран! Давайте попробуем:
body { высота: 150vh; background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg '); размер фона: обложка; }
Результат:
Если вы прокрутите вниз, вы увидите больше изображения — это потому, что оно покрывает элемент body (что составляет 150% от высоты области просмотра), а не фактический экран.
Вы также можете установить background-size на фактическое значение — измените свой CSS на это:
body { высота: 150vh; background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg '); размер фона: 2000 пикселей; }
Результат:
Опять же, если вы прокрутите вниз, вы увидите немного больше изображения.
прикрепление фона: фиксированное
прикрепление фона: фиксированное; используется для того, чтобы изображение оставалось на том же месте при прокрутке вниз. Это что-то вроде позиции : фиксированная , но для фоновых изображений. Давайте попробуем и посмотрим, что он делает:
body { высота: 150vh; background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg '); размер фона: 2000 пикселей; background-attachment: исправлено; }
Теперь, когда вы прокручиваете страницу вниз, фоновое изображение не перемещается вместе с ним:
ВАЖНО:
Прежде чем продолжить, удалите строку background-attachment: fixed , чтобы мы могли сосредоточиться на других свойствах. Ваш CSS должен выглядеть так:
body { высота: 150vh; background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg '); размер фона: 2000 пикселей; }
background-position
Как видите, отображается не все изображение, а какая часть отображается как ?
Что, если мы хотим показать центр изображения?
Здесь мы можем использовать свойство background-position :
body { высота: 150vh; background-image: url ('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/mountains.jpg '); размер фона: 2000 пикселей; background-position-x: center; background-position-y: center; }
Результат:
background-position-x и background-position-y используются для позиционирования изображения по горизонтали ( x ) и вертикали ( y ).
Допустимые значения для background-position-x :
И для background-position-y :
Кроме того, оба принимают числовые значения, например 200px .Они рассчитываются от правого верхнего угла. Так, например, background-position-x из 500px будет 500px слева, а background-position-y из 300px будет 300px сверху.
А пока оставим оба значения как center … (хотя вы можете поиграть, если хотите 😉)
background-repeat
Вы знаете эти мозаичные фоны? Часто это выглядит некрасиво, но может хорошо работать с повторяющимися текстурами.В данном случае мы просто воспользуемся нашим изображением горы, чтобы мозаика была более очевидной. Давайте посмотрим, что происходит, когда мы размещаем изображение мозаикой:
body { высота: 150vh; background-image: url ('https://codetheweb.blog/assets/img/posts/css-advanced-background-images/mountains.jpg'); размер фона: 500 пикселей; background-position-x: center; background-position-y: center; }
Результат:
Подождите, что? Но это же грабеж! Мы даже не использовали background-repeat !
Это связано с тем, что для фона повторение фона включено по умолчанию.Единственная причина, по которой этого не произошло раньше, заключалась в том, что наше изображение было настолько большим, что его не нужно было разбивать.
Свойство background-repeat имеет два основных значения: repeat и no-repeat . Это так просто!
По умолчанию для background-repeat установлено значение repeat , поэтому обычно вам не нужно это использовать. Однако что, если вы хотите отключить тайлинг? Давайте попробуем:
body { высота: 150vh; background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains.jpg '); размер фона: 500 пикселей; background-position-x: center; background-position-y: center; фон-повтор: без повторения; }
Результат:
(причина того, что изображение находится в нижней части экрана, состоит в том, что высота тела составляет 150%, помните?)
Итак, мы идем! Вот как работает свойство background-repeat в CSS!
Несколько фонов
Вы заметите, что теперь вокруг нашего изображения появился уродливый белый цвет.Что, если бы мы хотели сделать это, скажем, оранжевым? Вы не поверите, но на самом деле вы можете указать несколько фонов в CSS!
Первый фон будет помещен на экран, а остальные фоны после него будут наложены поверх.
Итак, попробуем! Помните, что background-color: orange идет первым, потому что мы хотим, чтобы он был под image:
body { высота: 150vh; цвет фона: оранжевый; background-image: url ('https: // codetheweb.blog / assets / img / posts / css-advanced-background-images / mountains. Категории: Разное Навигация по записям Назад Вперед Оставить комментарийДобавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт © 2019 Штирлиц Сеть печатных салонов в Перми Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми. Карта сайта

Фоновое изображение css: background-image | htmlbook.ru

Учебник CSS 3. Статья «Работа с фоном элемента в CSS»

Управление повтором фонового изображения

Управление позицией фонового изображения

Фиксированный задний фон

Свойства CSS 3 для работы с фоновыми изображениями

Универсальное свойство background

Вопросы и задачи по теме

Пособие для начинающих по позиционированию фона в CSS — CSS-LIVE

Области боксовой модели CSS

Система координат элемента

Изменение области позиционирования фона и системы координат при помощи

Позиционирование фоновых изображений при помощи

Как работают абсолютные значения background-position

Как работают процентные значения background-position

Смещение относительно любого края

Установка размеров, повторение, обрезка изображений и многое другое!

P.S. Это тоже может быть интересно:

Как установить адаптивное фоновое изображение для сайта

Посмотреть примерСкачать

Как сделать адаптивное фоновое изображение для сайта?

HTML часть

CSS часть

Бонус к статьей «Где брать фоновые изображения?»

Вывод

Успехов!

Как добавить фон в css

Работа с фоном в CSS

background-color

background-image

background-repeat

background-attachment

background-position

gradient

Работа с размером фона в CSS

Абсолютное изменение размера

Относительное изменение размера

Масштабирование до максимального размера

Заполнение фоном

Масштабирование сразу нескольких фонов

Создание полупрозрачного фона в CSS

Добавление фонового изображения

Повтор фонового изображения

Позиционирование фонового изображения

Фиксация фонового изображения

Объединение свойств

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

Свойства фона html-элементов

1. Базовый цвет: свойство background-color

2. Источник изображения: свойство background-image

3. Укладка изображений: свойство background-repeat

4. Фиксация изображения: свойство background-attachment

5. Позиционирование изображений: свойство background-position

6. Область рисования: свойство background-clip

7. Область расположения фона: свойство background-origin

8. Размер изображений: свойство background-size

9. Краткая запись свойств фона: свойство background

10. Множественные фоны

CSS свойство background. Фон для сайта // «Фрилансер по жизни»

Затемнение изображений простым и быстрым способом на чистом CSS

Фоновые изображения

CSS-фоновых изображений и специальных возможностей

Выпуск

Сравнение со встроенными изображениями

Требования

Решения

Не использовать фоновые изображения

Позиционирование частей встроенного изображения

Использовать до или после псевдоэлементов

Используйте холст HTML 5

Использование уловки позиционирования CSS

Заключение

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

Использование фоновых изображений CSS · Документы WebPlatform

Сводка

Введение

Как это работает?

Свойства фона

Создание предупреждающего сообщения

Конструкция