Учебник 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>
noRepeat {
background-repeat: no-repeat; /* фоновое изображение не будет повторяться. */
}
По аналогии с предыдущим примером для <body> мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков
- Для первого блока мы указали, что изображение не будет повторяться (значение no-repeat), это значение чаще всего используется в работе.
- Второй блок получил значение repeat-x, которое определяет, что фоновое изображение будет дублироваться по горизонтали.
- Ну и в третьем блоке фон дублируется по вертикали (значение repeat-y).
Результат нашего примера:
Управление позицией фонового изображения
По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием единиц измерения CSS, либо используя ключевые слова:
| Значение | Описание |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center» |
Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%. | |
| x y | Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет |
Рассмотрим пример использования этого свойства:
<!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>
png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
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>
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>
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>
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>
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>
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 ).
jpg’), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.Результат нашей работы:
Рис. 122 Пример использования универсального свойства background.Обращаю Ваше внимание на то, что установка нескольких фоновых изображений в качестве заднего фона для одного элемента выполнена для демонстрации возможностей CSS. В большинстве случаев проще установить один задний фон для одного элемента, а уже этот элемент настроить и позиционировать в документе как вам необходимо.
Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и три изображения) в любую папку на вашем жестком диске:
- Используя полученные знания составьте следующий документ (внимательно изучите страницу перед выполнением):
Практическое задание № 28.
Подсказка: для того, чтобы отцентровать содержимое, необходимо указать значение auto для внешних отступов слева и справа, обратите внимание, что в примере использована тень для блоков.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
© 2016-2021 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb./low-poly-background-672623312-5a5a8563e258f800370a105a.jpg?strip=info)
[email protected]
повтор фона — учебник CSS
Если элементу задать свойство background-image, то фоновый рисунок будет по умолчанию повторяться в двух осях — по горизонтали (x) и по вертикали (y). Для примера возьмем небольшое изображение с бесшовным фоном:
И установим его в качестве фона для блока div:
Изображение дублируется по вертикали и горизонтали
В результате фон продублировался по горизонтальной и вертикальной оси, на всю ширину и высоту нашего блока (отметим, что размеры блока div мы указали заранее).
Свойство background-repeat
Свойство background-repeat предназначено для управления повтором фона, заданного через background-image. Принимает оно следующие значения:
repeat— то же, что и значение по умолчанию — полностью заполняет элемент фоновым рисунком натурального размера, повторяя его сверху вниз и слева направо. Такой эффект хорошо смотрится только при правильном подборе фона, который в идеале должен быть бесшовным, не слишком ярким, малоконтрастным.no-repeat— заполняет элемент фоновым рисунком один раз. Размер фона остается натуральным (не сужается и не растягивается). Свойство с данным значением очень часто применяется на практике (мы рассмотрим это далее в книге).
background-repeat: no-repeatrepeat-x— фон повторяется только по горизонтали (оси x), до полного заполнения элемента по ширине. Удобно использовать для оформления элементов интерфейса (графическая полоска вдоль шапки сайта и т. п.).
background-repeat: repeat-xrepeat-y— фон повторяется только по вертикали (оси y), до полного заполнения элемента по высоте. Удобно использовать для оформления элементов интерфейса (графическая полоска по высоте сайдбара и т. п.).
background-repeat: repeat-y
Такой эффект хорошо смотрится только при правильном подборе фона, который в идеале должен быть бесшовным, не слишком ярким, малоконтрастным.Эти значения поддерживаются всеми браузерами, включая IE6.
Существует еще два значения, которые работают только в современных версиях браузеров (IE10+, Edge 12+, Firefox 49+, Chrome 32+, Safari 7+, Opera 19+):
round— фон повторяется так, чтобы в область элемента поместилось целое число изображений. Если это не удается сделать, фон автоматически подгоняется (масштабируется), чтобы соответствовать условию.
background-repeat: roundspace— работает так же, как и предыдущее свойство, но с одним отличием: если целое число изображений не помещается в область, рисунки не масштабируются, а между ними добавляется пространство.
background-repeat: space
Итак, вы уже знаете, как добавлять фон к элементу, а также как управлять его повторением. В следующем уроке вы познакомитесь с еще одним полезным свойством — background-position.
Множественные фоны — CSS | MDN
С помощью CSS3 вы можете применить несколько фонов к элементам.
Они будут располагаться поверх друг друга: фон, заданный первым — в самом верху, последний фон — в самом низу.
Задать множественные фоны легко:
.myclass {
background: background1, background 2, ..., backgroundN;
}
Вы можете сделать это сокращенным background свойством и отдельными свойствами кроме background-color. Таким образом следующие свойства могут быть определены в виде списка по одному на фон: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
HTML
<div></div>CSS
.multi_bg_example {
width: 100%;
height: 400px;
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles. png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom right, left, right;
background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}
png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom right, left, right;
background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}(If image does not appear in CodePen, click the TIdy button in the CSS section)
Как вы можете видеть, логотип Firefox (первый в списке) расположен сверху, далее идет градиент и в самом низу фон с пузырями. Каждое последующее под-свойство (background-repeat и background-position) применяется к соответствующим фонам. Например первое значение свойства background-repeat применяется к первому фону, и т.д.
Слайдер фонового изображения или меняющийся фон сайта с помощью CSS
Данный слайдер прост в установке и если разберетесь, то сможете легко его настроить и добиться нужного результата.
Для работы данного слайдера, нужно всего несколько элементов, которые мы сейчас рассмотрим по порядку.
HTML разметка
Тут все очень просто, нужно просто добавить UL-список в самое начало сразу после тега body.
<ul> <li></li> <li></li> <li></li> </ul>
В списке всего три строки li, то есть слайдер рассчитан на 3 изображения, если нужно больше, то первым шагом будет добавление еще нужного количества строк. Двигаемся дальше.
CSS стили
Тут наверное самая основная часть работы, так как от CSS, зависит то как будет работать наш слайдер. Открываем файл стиле вашего сайта и добавляем в него следующий код.
.body_slides{
list-style:none;
margin:0;
padding:0;
z-index:-2;
background:#000;}
.body_slides,
.body_slides:after{
position: fixed;
width:100%;
height:100%;
top:0px;
left:0px;}
. body_slides:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;}
.body_slides li{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-size:cover;
background-repeat:no-repeat;
opacity:0;
-webkit-animation: anim_slides 18s linear infinite 0s;
-moz-animation: anim_slides 18s linear infinite 0s;
-o-animation: anim_slides 18s linear infinite 0s;
-ms-animation: anim_slides 18s linear infinite 0s;
animation: anim_slides 18s linear infinite 0s;
}
.body_slides li:nth-child(1){
background-image: url(images/1.jpg)
}
.body_slides li:nth-child(2){
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(images/2.jpg)
}
.body_slides li:nth-child(3){
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(images/3. jpg)
}
@-webkit-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
body_slides:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;}
.body_slides li{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-size:cover;
background-repeat:no-repeat;
opacity:0;
-webkit-animation: anim_slides 18s linear infinite 0s;
-moz-animation: anim_slides 18s linear infinite 0s;
-o-animation: anim_slides 18s linear infinite 0s;
-ms-animation: anim_slides 18s linear infinite 0s;
animation: anim_slides 18s linear infinite 0s;
}
.body_slides li:nth-child(1){
background-image: url(images/1.jpg)
}
.body_slides li:nth-child(2){
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
background-image: url(images/2.jpg)
}
.body_slides li:nth-child(3){
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
background-image: url(images/3.
jpg)
}
@-webkit-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes anim_slides {
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100% {opacity:0;}
}
Если Вы разбираетесь в CSS, то для Вас не составит труда понять, что за что отвечает. Расскажу по минимуму, потому как обучать CSS, нет смысла.
Наш список со слайдами имеет класс body_slides. Ему заданы стили, для внешнего вида и общих настроек.
Далее у нас идет псевдоэлемент — :after, который задает дополнительный слой и поверх фона наложен узор в виде точек. Делается это с помощью изображение, к которому указан путь images/pattern.png. Если у Вас другой путь, то укажите его правильно.
.body_slides li:nth-child(1) — это первый по порядку слайд и ему задан фоновый рисунок.
Далее идет nth-child(2), ему кроме рисунка задано еще время и равно 6 сек. То есть, он появится через 6 секунд после первого слайда. Далее nth-child(3), он появится еще через шесть секунд, поэтому у него время 12 сек. Если нужно добавить 4 слайд, то добавляем nth-child(4) и у него должно быть время уже 18 секунд. Думаю тут понятно.
Далее нужно указать полное время анимации, оно сейчас задано в body_slides li и равно 18 сек. Если добавите 4 слайд то будет равно 24 и так далее. Если с математикой дружите, должны справится, главное не ошибиться ибо слайдер ровно не заработает. По желанию можно ускорить или замедлить, прописав нужное время.
keyframes anim_slides — это появление и исчезновении слайда. Изначально слайд прозрачный и ему задано условие — opacity:0;. Когда приходит очередь любого из слайдов, он сначала появляется, а потом начинает вновь становится прозрачным и полностью исчезает, а на его месте появляется новый. В данном примере — 3 слайда и 100% анимации это время перелистывания всех слайдов, а не одного.
Поэтому слайд первый появляется виден и исчезает на 30%(максимально можно 33.3%) потому как, если 100% разделить на 3 слайда — получится 33,3%. Если бы у вас было 4 слайда — то 25%. То бишь, нужно показать появление, показ и исчезновение слайда за 25% от общих 100%. В нашем примере с 3 слайдами. Слайд появляется от 0 до 6%, виден от 6 до 24% и исчезает от 24 до 30%. Если хотите изменить скорость появления или исчезновения, меняйте проценты — это процент от общего времени. От правильности указания процентов — зависит и правильность работы слайдера.
Остальные настройки уже по желанию и нужде — общий фон, сейчас черный, путь к картинкам, позиционирование, уровень слоя и тд. Преимущество данного слайдера в том, что он простенький и не использует скриптов и целых библиотек, если бы он был сделан с помощью — jQuery. Очень надеюсь, что если Вы хотели себе смену фоновых картинок то данный CSS слайдер, Вам поможет.
На этом все, спасибо за внимание. 🙂
Как добавить фоновое изображение в HTML-емейл — Stripo.
emailВы можете вызвать у клиентов желание прочитать ваше сообщение — или же наоборот, покинуть его и даже удалить. Все зависит не только от вашего выгодного предложения, но в основном от стиля и структуры вашего емейл-шаблона. Огромное значение здесь имеет дизайн.
Просто выбирая фото и добавляя фоновые изображения в HTML-емейл, вы задаете тон всего сообщения.
Все, что нам нужно сделать, чтобы создать эффективную и продающую емейл-кампанию, — чтобы этот тон был жизнерадостным.
Посмотрите наше короткое видео с основной информацией о типах фона и о том, как добавить их в Stripo.
В интернете масса информации о кнопках призыва к действию, баннерах и шрифтах.
Но вряд ли вы найдете что-то о фоновых изображениях для емейлов. Очень жаль: ведь фоновое изображение — отличный способ украсить отправленные вами сообщения, чтобы они выглядели привлекательно и завершенно.
Я искала в сети хоть какие-то подробности о фоновых изображениях для HTML-емейлов, но все, что я нашла, — как добавить фон в исходящий емейл в Gmail или Outlook и как вносить изменения в коды HTML.
Резонный вопрос: где найти беспроигрышные варианты фоновых изображений для наших емейлов и как добавить их в шаблоны. Это очень индивидуально: если все правильно сделать, то любое изображение может стать для вас идеальным решением.
Почему тема статьи называется “Как добавить фоновое изображение в HTML-емейл»? Дело в том, что в других редакторах вам нужно иметь навыки работы с кодом HTML, чтобы вставить фон в полосу или применить его для всего сообщения. Но только не в Stripo. Мы упростили этот процесс для вашего удобства — и больше не нужно вносить никаких изменений в HTML-код.
Что нужно знать, прежде чем добавлять фоновое изображение в ваш HTML-емейл
Проверьте отображение ваших емейлов
Поскольку фоновые изображения являются важной декоративной частью емейла, маркетологи и дизайнеры стараются добавлять их в свои сообщения, чтобы порадовать клиентов красиво структурированными рассылками, но некоторые из емейл-клиентов не отображают фоновые изображения должным образом.
Именно поэтому перед отправкой емейлов очень важно тестировать их отображение с помощью Litmus или любого аналогичного сервиса. Они протестируют ваш шаблон для более чем 70 приложений и устройств, предоставят вам скриншоты.
В этом примере мы видим, что фон в виде белой рамки не отображается в Outlook 2003, равно как в Outlook 2016 и Windows 10 Mail, но отображается в версии 2007 года.
Что делать, если изображение не отображается:
При написании текста поверх фонового изображения/цвета попробуйте выбрать цвет, который будет контрастировать с изображением и цветом фона емейла.
Это сделает ваш текст разборчивым.
Примечание: фоновый цвет емейла по умолчанию белый.
Разновидности фоновых изображений
Фоновые изображения для полос
Очень немногие конструкторы шаблонов позволяют встраивать фоновые изображения в отдельные блоки. Stripo.email — один из них.
Мне нравится этот пример за простое, но изысканное изображение.
Просто посмотрите, как легко добавить фоновое изображение в емейл с помощью Stripo:
- мы вставили блоки: дополнительное изображение, текст, можно также добавить “кнопку” или таймер обратного отсчета поверх фона;
-
выбрали цвет фона для всей полосы;
-
применили “фоновое изображение” для блока.
Примечание: отцентрируйте его с помощью кнопки “Центрирование”, используйте опцию “Повторить”, если ширина или высота изображения слишком малы, чтобы заполнить всю полосу.
Поместите текст поверх изображения, добавьте кнопку, если хотите.
Это важно: добавленное изображение можно отредактировать в нашем встроенном фоторедакторе.
Добавьте разделители… Почему мы здесь говорим о разделителях? Потому что если мы хотим, чтобы дизайн емейла выглядел более упорядоченным, мы можем использовать их для разделения частей блоков и даже полос. Это особо уместно, если фоновые изображения имеют одинаковый цвет.
Иногда вы можете захотеть расширить границы полос. В таком случае вам нужно установить фоновое изображение для всего емейла.
Например, ReallyGoodEmails и Adidas таким образом расширяют свой хедер. Этот уникальный дизайн отличает их от других.
Как это сделать в Stripo:
- загрузите изображение, которое вы выбрали, либо используйте любую картинку из нашего встроенного банка изображений;
-
включите все опции.
Цвет фона в качестве альтернативы фоновому изображению
Хорошая новость: установить соответствующий цвет в качестве фона намного проще. И он почти всегда корректно отображается в любых емейл-клиентах и на всех устройствах. Но будьте осторожны с Microsoft Outlook. Вам все равно нужно проверить отображение с помощью Litmus.
Здесь вы можете использовать все богатство воображения.
Например, компания Outline всегда помещает новости на цветной фон. Кроме того, применяются контрастные цвета шрифта, но не черный текст.
Применять ли разные цвета для отдельных блоков или всего емейла? Решать вам.
Корпорация Samsung помещает большую часть своих емейлов на черный фон и применяет контрастную кнопку CTA. Выглядит очень классно.
Фоновое изображение для всего емейла
Когда мы используем одно фоновое изображение для всего емейла? Всегда, когда хотим.
Потому что емейлы с фоновыми изображениями выглядит более завершенными. В качестве фона используйте тематическое изображение. Если мы говорим о еде, добавьте фото овощей и фруктов; если о футболе, то почему бы не использовать футбольное поле или мяч?
Чем отличается изображение баннера от фонового изображения емейла? Баннер — это то, что клиенты видят как основное изображение вашего сообщения, обычно с текстом поверх него. А фоновое изображение они видят только на десктопных устройствах. На большинстве мобильных девайсов эти изображения вообще не отображаются.
Именно так клиенты видят ваш емейл с фоновым изображением на рабочем столе и на мобильных экранах.
Благодаря фоновым изображениям в HTML-емейлах ваши рассылки будут выглядеть красивыми, структурированными и правильно построенными, но они не влияют на тело ваших сообщений.
Вы можете размещать поверх них баннеры, образцы вашей продукции, контактную информацию, рамки, футеры, хедеры и т.
д.
Как установить фоновое изображение в шаблоне емейла с помощью редактора Stripo.email:
- на панели инструментов выберите “Внешний вид”;
-
нажмите “Общие”;
-
включите опцию “Фоновое изображение”;
-
загрузите понравившееся изображение;
-
включите “Повтор” и “Центрировать”.
Примечание: поскольку некоторые емейл-клиенты не отображают фоновое изображение, вы можете установить цвет фона по умолчанию.
Правила, которые следует соблюдать
При добавлении фоновых изображений в емейл-рассылку важно соблюдать простые правила:
- изображения, которые вы выбираете, должны быть привлекательными и тематическими. Все детали емейла должны вызывать эмоции у клиентов;
-
обратитесь за помощью к дизайнерам, фотографам или найдите сайт с широким выбором изображений.
Не нарушайте авторские права; -
добавляйте только одно изображение как фон для всего емейла;
-
выбирайте только подходящие, но контрастные цвета шрифтов для текста;
-
включайте опцию “Адаптивное изображение”. Это поможет корректно отображать изображения на мобильных и десктопных устройствах.
Не нарушайте авторские права;Раньше нам нужно было разбираться в HTML-коде, чтобы добавить фоновое изображение в шаблон емейла. Сейчас в редакторе Stripo.email нам вообще не нужно вносить никаких изменений в код. Нам даже не нужно знать, что это вообще такое. ?
Система упростила весь процесс и облегчила нашу работу.
Краткие итоги
- теперь упоминание “HTML” связано скорее с качеством ваших емейлов, чем с использованием его для создания писем;
-
изображения в емейлах следует использовать высокого качества;
-
изображения должны иметь бесшовную структуру.
Вы можете найти множество таких картинок в интернете; -
вставляйте разделители, чтобы отделить блоки вашего емейла;
-
устанавливайте цвет фона, как альтернативу (fallback), если картинка на загрузится у получателя, например, в Microsoft Outlook;
-
тестируйте сообщения перед отправкой.
Вы можете найти множество таких картинок в интернете;Используйте наши адаптивные HTML-шаблоны, добавляйте фон и радуйте клиентов красивыми рассылками.
Желаю вам всего наилучшего и успешных рассылок!
background » Скрипты для сайтов
1 768 Other / CodepenРазмытый сверкающий фон на канвасе
Размытый сверкающий фон на канвасе. Сделано с использованием библиотеки GSAP
3 119 CodepenГенератор случайных разноцветных кружков
Генератор на canvas разноцветных рандомных кругов.
Низко полигональный генератор фона
Генератор фона из треугольников с возможностью настройки глубины, вариативности, цветов, градиента. Полученный результат можно скачать, как изображение любого выбранного размера
7 638 Скрипты / OtherBubbly — анимированный фон из пузырьков на canvas
Скрипт bubbly позволяет создать на страницы анимированный фон из пузырьков, которые можно заставить двигаться по заданной математической формуле. В параметрах также настраиваются разные визуальные эффекты, такие как блюр, цвета, размеры и т.п.
2 777 CodepenSVG маска для фонового изображения
SVG маска для изображения. Удерживая левую кнопку мышки область маски будет расти и изображение вернется к своему исходному состоянию. Перемещая курсор мыши, область под ним будет отображать исходную картинку без маски.
Капельный фон
Фон с эффектом перетекающих капель. Сделано с помощью SVG масок и CSS анимации.
8 315 CodepenАнимированный градиентный фон на SVG
Задний фон с анимированным градиентом в SVG
11 501 Скрипты / AnimationCSS3 анимация звездного ночного неба
Несколько экспериментов над фоном и его анимацией с помощью только CSS3. Статичный и анимированный фон звездного неба и анимированный фон падающего снега.
1 247 ПолезноДелаем сами CSS3 фон
Онлайн сервис для создания CSS3 фонов. Можете сами сделать фон из полосочек, параметр каждой задается в редакторе. После того, как фон готов, просто скопируйте полученный код.
1 989 ПолезноCSS3 узор для фона
Ресурс на котором можно присмотреть для своего сайта бесшовный фон на CSS3, а не привычную всем картинку. Есть очень симпатичные бэкграунды.
2 058 Скрипты / OtherПолноразмерное фоновое изображение
Всё что нам понадобится — это изображение, которое будет использоваться в качестве фонового. При изменении окна браузера, будут изменяться и размеры нашего фонового изображения. Плагин проверен в Safari, Chrome, Opera, IE8 и Firefox.
2 157 Скрипты / Menu & NavМеню с анимацией фона кнопки
Вид меню с различными эффектами анимации фона. Смена фона происходит, либо как слайд — справа налево, сверху вниз, либо происходит плавное изменение цвета.
- Назад
- 1
- 2
- Вперёд
Размытие фона средствами CSS
В CSS3 есть множество новых свойств, которые могут значительно ускорить
вёрстку тех или иных элементов страницы.
Например, css-фильтры, об одном из
которых сегодня предлагается поговорить.
Каждый из нас хотя бы раз имел возможность наблюдать эффект размытия на
странице. Зачастую для его создания используется jQuery-библиотека bjurjs. Однако, не на всех сайтах целесообразно использовать jQuery, да и
технологии не стоят на месте: теперь мы можем воспользоваться решением на чистом CSS. Попробуем?
Пример простейшей разметки:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Blur</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<main>
<div></div>
<div>
<h3>Welcome to our website!</h3>
</div>
</main>
</body>
</html>Итак, задан родительский div с классом wrapper, служащий контейнером для двух
вложенных div’ов: inner-wrapper будет содержать текст приветствия, а blur —
изображение, к которому нужно применить эффект размытия.
Обратимся к стилям.
.wrapper {
position: relative;
width: 500px;
height: 500px;
margin: 0 auto;
}
.inner-wrapper,
.blur {
position: absolute;
width: 500px;
height: 300px;
left: 0;
top: 0;
bottom: 0;
right: 0;
}Как можно видеть, дочерние блоки абсолютно позиционированы и находятся на
одном уровне. Дело в том, что эффект размытия будет применяться и к тексту
приветствия, чего нам хотелось бы избежать. Поэтому лучше управлять положением
блоков относительно друг друга при помощи z-index. Сделаем это, а также
зададим необходимый бэкгрануд для .blur:
.inner-wrapper {
z-index: 100;
color: #fff;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,.5);
}
.blur {
z-index: 99;
background-image: url(image.png);
background-size: cover;
background-repeat: no-repeat;
}На данный момент получаем простейшую страничку с картинкой и текстом:
Настало время применить магию! Увы, firefox пока не поддерживает css-фильтры, поэтому в дело пойдёт небольшой трюк: нужно «скормить» ему svg-файл со следующим содержимым:
<svg version="1. 1" xmlns="http://www.w3.org/2000/svg">
<filter>
<feGaussianBlur stdDeviation="5"/>
</filter>
</svg>
1" xmlns="http://www.w3.org/2000/svg">
<filter>
<feGaussianBlur stdDeviation="5"/>
</filter>
</svg>и указать путь к этому файлу, а также обратиться к нужному фильтру. В нашем случае фильтр
всего один: тот, что определён под id blur. Вот как должен быть преобразован
css-код для получения эффекта размытия:
.inner-wrapper {
z-index: 100;
color: #fff;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,.5);
}
.blur {
z-index: 99;
background-image: url(image.png);
background-size: cover;
background-repeat: no-repeat;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
filter: blur(5px);
filter: url('blur.svg#blur');
}А вот и итоговый вариант с применением эффекта размытия:
Единственный недостаток: нечёткие границы размытия, которые выходят за пределы
родительского элемента. Часто такой побочный эффект может быть
нежелательным. Ну, что ж, можно поиграть с радиусом размытия или применить overflow: hidden.
Цвет фона HTML: Как настроить фон
Обычная веб-страница имеет белый фон. Таблица и тексты тоже. Черный текст на белом фоне очень распространен и скучен. Это было обычным делом в те дни, когда веб-дизайн находился на начальной стадии. Но по мере развития технологий и развития CSS появилось больше возможностей для создания более привлекательных веб-страниц. В настоящее время большинство веб-сайтов имеют красочные веб-страницы. Разработка таких веб-страниц осуществляется путем объединения HTML с CSS.В CSS есть много возможностей для изменения фона всего в HTML. Цвет фона HTML всей страницы, таблиц и даже текста также можно изменить с помощью CSS. В этой другой статье мы предлагаем вам на выбор полную таблицу цветов HTML. Некоторые из способов описаны ниже.
Тем в статье
Цвет фона тела с использованием названий цветов
Одним из наиболее распространенных способов изменения цвета фона HTML веб-страницы является использование простых названий цветов, таких как красный, зеленый, синий и т.
Д.Для изменения цвета фона используется атрибут background-color. Ниже приведен пример изменения цвета фона с помощью встроенных стилей.
Эта веб-страница имеет красный цвет фона!
Атрибуту background-color присвоено значение красного цвета. Таким образом, цвет фона HTML теперь красный. Красный можно заменить любым названием цвета.
Цвет фона корпуса с использованием шестнадцатеричных кодов цветов
Мир полон красок.При разработке веб-страниц можно использовать множество цветов. У каждого цвета есть определенное название, например красный, желтый, черный и т. Д. Но у каждого цвета есть множество оттенков. Например, красный цвет доступен в различных оттенках, таких как темно-красный, светло-красный, малиновый, огнеупорный и т. Д. То же самое и со многими другими цветами. Итак, как использовать эти цвета в HTML? Ответом на это является модель RGB. Красный, зеленый и синий цвета можно смешивать, чтобы получить широкий спектр цветов.
Каждый из этих оттенков имеет шестизначный код. Этот код известен как шестнадцатеричный цветовой код.
Hex также можно использовать с HTML и CSS для изменения цвета фона HTML веб-страницы. Они также используются с атрибутом background-color. Вместо названия цвета используется цифровой знак (#), за которым следует шестизначный код оттенка. Ниже приведен пример изменения цвета фона с помощью метода встроенных стилей CSS.
Это демонстрационная веб-страница
Обратите внимание на приведенный выше код.Все аналогично предыдущему методу, но с небольшими изменениями. Вместо присвоения имени цвета как значения атрибуту background-color используется # FF00FF. # FF00FF — шестнадцатеричный код пурпурного цвета.
Щелкните здесь, чтобы выбрать любой оттенок с его шестнадцатеричным цветовым кодом.
Изменение цвета фона HTML тега Div
Что делать, если вы хотите изменить цвет фона HTML только для некоторой части веб-страницы? Это тоже возможно.
Div используется для определения подразделения или раздела на веб-странице.Цвет фона таких разделов или разделов также можно изменить с помощью CSS. Есть несколько способов сделать это. Но я объясню самые простые и быстрые из них, то есть встроенные стили.
Цвет фона этого тега div красный, а цвет фона этой веб-страницы - желтый
В приведенном выше коде цвет фона веб-страницы желтый, а у части div красный фон.В теге div встроенный стиль используется для установки красного цвета фона. # FFF00 и # FF0000 — это шестнадцатеричные коды цветов желтого и красного соответственно.
Изменение цвета фона таблицы
Таблицы играют важную роль в веб-дизайне. У таблиц много ролей. Столы также должны выглядеть привлекательно. Есть много способов, с помощью которых стол может выглядеть лучше и привлекательнее. Один из таких способов — задать цвет фона. Подобно тегу body и тегу div, тегу таблицы также могут быть присвоены встроенные стили с атрибутом background-color.
Ниже приведен пример таблицы с тремя строками и тремя столбцами и зеленым фоном (# 00FF00).
<стиль>
table, th, td {
граница: сплошной черный 1px;
}
<таблица>
Имя
Страна
Возраст
Джон
США
21
Сэм
Испания
22
В приведенном выше коде встроенный стиль используется в теге таблицы.Это изменит фон всей таблицы. Если вы хотите изменить цвет фона определенной строки, добавьте встроенные стили с атрибутом background-color в теге tr. Сделайте то же самое с тегом td, если хотите изменить цвет фона определенного столбца.
Изменение цвета фона текста
На веб-странице всегда много текста. Как правило, тексты не имеют определенного цвета фона. Но если есть необходимость в тексте с определенным цветом фона, встроенные стили можно использовать и в теге span.
Ниже приведен пример изменения цвета фона текста с помощью встроенных стилей.
этот текст не имеет цвета фона
этот текст имеет красный цвет фона
этот текст имеет зеленый цвет фона
В приведенном выше коде первый абзац не имеет цвета фона.Второй абзац имеет красный (# FF0000) фон, а третий абзац имеет зеленый (# 00FF00) фон.
Заключение
С цветами все выглядит лучше. Цвета играют большую роль в веб-дизайне. В начале истории Интернета на экранах не было цветов. Итак, первые реализации HTTP / HTML не имели такой поддержки. Они часто используются в HTML и CSS для создания привлекательных веб-страниц. Цвета могут быть применены ко всей веб-странице или некоторой ее части с помощью тега div.Таблицы также могут иметь цвет фона HTML. Даже определенные строки и столбцы также могут иметь цвет фона. Цвет фона также можно применить к тексту с помощью тега span.
HTML и CSS предоставляют множество возможностей для изменения цвета фона практически всего. Следует только знать, как эффективно использовать эти параметры, чтобы веб-сайты выглядели более привлекательно и лучше.
Как применить преобразования CSS3 к фоновым изображениям
Преобразования CSS прекрасны, но они (пока?) Не применяются к фоновым изображениям.В этой статье представлен обходной путь для тех случаев, когда вы действительно хотите повернуть фоновое изображение или сохранить фиксированное фоновое изображение, пока его элемент-контейнер вращается.
Эта статья была обновлена в 2020 году. Чтобы узнать больше о CSS, прочтите нашу книгу CSS Master, 2nd Edition.
Масштабирование, наклон и поворот любого элемента возможны с помощью свойства CSS3 transform . Он поддерживается всеми современными браузерами без префиксов поставщиков.
#myelement {
преобразовать: повернуть (30 градусов);
}
Отличный материал.
Однако при этом вращается весь элемент — его содержимое, граница и фоновое изображение. Что, если вы хотите повернуть только фоновое изображение? Или что, если вы хотите, чтобы фон оставался фиксированным при повороте содержимого?
Нет предложения W3C CSS для преобразования фонового изображения и . Это было бы невероятно полезно, поэтому, возможно, однажды он появится, но это не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.
Один из вариантов — создать новое фоновое изображение из оригинала, скажем, повернутое на 45 градусов. Этого можно добиться с помощью:
- процесс обработки изображений на стороне сервера
- на стороне клиента
Canvas— код обработки изображений, или - API, предоставляемых некоторыми службами CDN, размещающими изображения.
Но все это требует дополнительных усилий, обработки и затрат.
К счастью, есть решение на основе CSS. По сути, это хак, который применяет фоновое изображение к псевдоэлементу :: before или :: after , а не к родительскому контейнеру.
Затем псевдоэлемент можно преобразовать независимо от содержимого.
Преобразование только фона
К элементу-контейнеру можно применить любые стили, но он должен быть установлен в положение position: relative , поскольку наш псевдоэлемент будет расположен внутри него. Вам также следует установить overflow: hidden , если вы не хотите, чтобы фон выливался за пределы контейнера.
#myelement {
положение: относительное;
переполнение: скрыто;
}
Теперь мы можем создать абсолютно позиционированный псевдоэлемент с преобразованным фоном. z-index установлен на -1 , чтобы он отображался под содержимым контейнера:
#myelement :: before {
содержание: "";
позиция: абсолютная;
ширина: 200%;
высота: 200%;
верх: -50%;
осталось: -50%;
z-индекс: -1;
фон: url (background.png) 0 0 повторение;
преобразовать: повернуть (30 градусов);
}
Обратите внимание, что вам может потребоваться настроить ширину, высоту и положение псевдоэлемента.
Например, если вы используете повторяющееся изображение, повернутая область должна быть больше, чем ее контейнер, чтобы полностью покрыть фон.
Фиксация фона на преобразованном элементе
Все преобразования родительского контейнера применяются к псевдоэлементам. Следовательно, нам нужно отменить это преобразование. Например, если контейнер повернут на 30 градусов, фон необходимо повернуть на -30 градусов, чтобы вернуться в исходное положение:
#myelement {
положение: относительное;
переполнение: скрыто;
преобразовать: повернуть (30 градусов);
}
#myelement :: before {
содержание: "";
позиция: абсолютная;
ширина: 200%;
высота: 200%;
верх: -50%;
осталось: -50%;
z-индекс: -1;
фон: url (background.png) 0 0 повтор;
преобразовать: повернуть (-30 градусов);
}
Опять же, вам нужно отрегулировать размер и положение, чтобы фон должным образом покрыл родительский контейнер.
Вот соответствующие демонстрации в прямом эфире на CodePen:
Смотрите Pen
CSS3 Transforms on Background Images от SitePoint (@SitePoint)
на CodePen.
Эффекты работают во всех основных браузерах и в Internet Explorer до версии 9. В старых браузерах преобразования вряд ли будут отображаться, но фон все равно должен отображаться.
HTML Код фоновой музыки
Как добавить фоновую музыку на сайт с помощью HTML.
Вы можете добавить код фоновой музыки HTML на свой веб-сайт, используя элемент , но опуская атрибут control . Атрибут controls. указывает, что должны быть элементы управления (например, кнопка «Воспроизвести», «Пауза» и т. Д.), Поэтому при удалении этого атрибута никакие элементы управления отображаться не будут.
Попробуй
Вы можете попробовать это на примере ниже.Обновите элемент управления с помощью автовоспроизведения , затем нажмите Обновить результат .
Это скроет элементы управления и автоматически проиграет музыку в фоновом режиме.
mp3 «элементы управления>
Если вы читаете это, значит, ваш браузер не поддерживает аудиоэлемент.
Если вы не видите приведенный выше пример, возможно, ваш браузер еще не поддерживает элемент (этот элемент был введен в HTML5).Для браузеров, которые не поддерживают этот элемент, вы можете вложить элемент внутри элемента . Таким образом несовместимые браузеры будут игнорировать элемент и сразу переходить к элементу . Хотя этот элемент также был представлен только в HTML5, он существует уже давно (но не входит в официальную спецификацию HTML) и широко поддерживается браузерами.
Атрибуты для элемента
Элемент поддерживает ряд атрибутов — как глобальных, так и локальных.
Чтобы увидеть их список вместе с описанием, посетите страницу тега HTML5 .
Вы также можете добавить код фоновой музыки HTML на свою веб-страницу, используя скрытый атрибут тега . Опять же, вы можете вложить этот тег в тег для максимальной совместимости с браузером. Для этого см. Музыкальный код HTML.
Этот код будет запускать музыку в фоновом режиме, как только страница загружается. Увидеть / услышать результат.
Добавление элементов управления звуком
При использовании элемента , если вы хотите, чтобы ваши пользователи могли управлять воспроизведением фоновой музыки или нет, вы можете просто удалить скрытый атрибут (или изменить его на «false»).
Вы также можете добавить ширину и высоту к элементам управления.Также неплохо отключить автозапуск ( autostart = "false" ), хотя это работает не во всех браузерах.
Лучший способ кодирования фоновых цветов для HTML-письма
Отсутствие какого-либо стандарта кодирования затрудняет создание электронных писем в формате HTML.Даже такая простая вещь, как применение цветов фона к элементам электронного письма, может быть сложной задачей. Фактически, существует ряд почтовых клиентов, которые по-разному отображают цвет фона в зависимости от того, как они закодированы.
Прочтите, чтобы получить общую информацию и найти единственный надежный способ кодирования цветов фона в электронной почте для получения согласованных результатов по всем направлениям.
Зачем использовать цвета фона в электронной почте?
В отличие от изображений, цвета фона отображаются во всех почтовых клиентах и не увеличивают время загрузки электронной почты, делая дизайн электронной почты более особенным без увеличения веса письма.
Plus, фоновые цвета также помогают установить иерархию и организовать контент, облегчая подписчикам чтение ваших писем, даже когда изображения отключены.
Вот пример того, как мы используем цвета фона, чтобы различать контент в нашем информационном бюллетене. Когда изображения отключены, вы можете увидеть, как разные цвета фона помогают поддерживать иерархию содержимого электронной почты.
Изображения OnImages OffКак закодировать цвет фона?
Обычно цвета фона применяются к нескольким общим элементам HTML:
и .В зависимости от вашего опыта и стиля программирования вы можете использовать один из шести (да, шесть) различных способов применения цвета фона к элементам в вашем письме:
Трехзначный HEX-код в электронном письме Использование трехзначных или сокращенных HEX-кодов - не лучшая идея.
|
Когда в тегах
Тем не менее, хотя некоторые методы работают последовательно с определенными элементами, придерживаться одной стратегии цвета фона проще, чем пытаться сохранить определенные причуды цвета фона.
Фоновые изображения могут создать отличные эффекты в дизайне электронной почты и действительно оживить его.
placeholder. com / 640 × 400 »width =« 640 »height =« 400 »valign =« top »style =« background: url ('https://via.placeholder.com/640 × 400') center / cover no-repeat # 000000; »> 
Здесь ничего нового.
Основное отличие - это положение: абсолютное; чтобы разместить прямоугольник там, где он нам нужен.
02.2019 компанией Computer Hope
Без звука
Компоненты привязки будут темнеть при наведении курсора, как и классы текста. Фоновые утилиты не устанавливают 
Узнайте о наших опциях Sass для включения этих и других классов.