Фон body css: background-image | htmlbook.ru
Использование фона у тега body
В этом уроке мы будем разбираться с тегом body, а точнее с его свойствами, которые позволяют задать тегу фоновый цвет. Иногда это работает совсем не так, как вы можете того ожидать. Сегодня вы узнаете почему это происходит именно так, и как это исправить.
Допустим, вам нужно, чтобы у вашего веб-сайта был красный фон. И вы воспользуетесь следующим кодом CSS:
body { background: red; }
И получите такой результат:
После работы над кодом CSS, не связанным с цветом тега body, Вы заметите неожиданные изменения:
Что же случилось? Почему красный цвет так обрезан? Ведь он задан как цвет фона для тега body.
То, что в некоторых ситуациях цвет фона тега body заливает собой весь фон веб-сайта, — просто странность кода CSS. По-настоящему высота тега body меньше высоты окна браузера. Тег body по высоте равен своему содержимому так же, как блок и другие элементы.
Посмотрите:
Если у тега html не задан фон, фон тега body закроет всю страницу. Но если у тега html фон задан, фон тега body будет вести себя так же, как и любой другой элемент.
Получается, в этой ситуации в какой-то момент тегу html был задан белый цвет фона.
Возможно, вы используете какую-то таблицу стилей для сброса кода CSS, в которой прописывается белый цвет для тега html, чтобы для этой цели не использовалась системная цветовая схема в таких браузерах, как Firefox, Internet Explorer и Opera, например такую, как normalize.css 2.1.1. Вероятно, из-за широкого распространения подобных проблем этот подход уже не используется в большинстве современных версий таблиц стилей для сброса кода CSS.
Чтобы решить эту проблему, просто удалите фон у тега html или перенесите тот цвет, который должен заливать весь фон, тегу html, так как его поведение всегда одинаковое — его цвет фона зальет собой все свободное пространство.
Автор урока Chris Coyier
Перевод — Дежурка
Смотрите также:
Учебник CSS 3. Статья «Работа с фоном элемента в 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 Пример установки изображения в качестве фона.Управление повтором фонового изображения
Это свойство имеет следующие доступные значения:
Значение | Описание |
---|---|
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 мы можем изменить это положение с использованием
Значение | Описание |
---|---|
left top left center left bottom right top right center right bottom center top center center center bottom | Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center» |
x% y% | Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию |
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 был использован.
© 2016-2021 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]
background-position чуть подробнее
В общем, background-position
— очень простое свойство в CSS используемое, чтобы указать позицию фонового изображения.
body { background-position: 100px 5px; }
Есть несколько вариантов синтаксиса, чтобы указать позицию фона:
- Числовое значение в пикселях (
100px 5px
). - Значение в процентах (
100% 5%
). - Ключевое слово (
top right
).
Соответственно, числовое и процентное значение указывает на сколько сместить фон от левой и от верхней сторон блока, а ключевое слово указывает к какой стороне фон будет прижат — top right
означает, что фон будет прижат кверху и правой стороне.
По умолчанию, значение background-position: 0 0;
— что означает, что фон прижат кверху блока слева.
Это всё просто и понятно, но я не зря держал эту статью долгое время в черновиках. Настало время раскрыть несколько малоизвестных особенностей свойства background-position
.
Позицию фона можно указать одним значением
center
— тут все понятно, изображение будет по центру блока и по горизонтали, и относительно вертикали.top
,left
,bottom
,right
— а здесь уже интереснее. Указывается край возле которого нужно поместить элемент. А для второго параметра устанавливается значение50%
, таким образом элемент размещается в середине указанной стороны.top
— значит фоновая картинка будет по центру сверху и тд.10%
или25px
— процентное или числовое значение означает, что фон будет смещен по горизонтали от левого края на указанное значение (по оси X), но при этом по вертикали (по оси Y) фон будет смещен на 50%, то есть будет по центру.
В чем особенность использования одного значения, что многие ожидают, что второе значение или будет равно 0
, или будет равно такому же значению, как указано. Но как видно, то второе значение будет равно 50%
. Это нужно просто запомнить.
Позицию фона можно указать тремя-четырьмя значениями
Это самая интересная фишка, и, как ни странно, о ней очень многие не знают.
Синтаксис из трех или четырех значений чередуется между ключевыми словами и единицами длины или процентов. Вы можете использовать любое из значений ключевого слова, кромеcenter
для трех- или четырехзначного объявления background-position
.
Когда вы указываете три значения , браузер интерпретирует «отсутствующее» четвертое значение как 0
. Вот пример трех значений background-position
:
body { background-position: right 45px bottom; }
Это расположит фоновое изображение на 45 пикселей справа и на 0 пикселей снизу контейнера.
Вот пример четырехзначного значенияbackground-position
:
body { background-position: right 45px bottom 20px; }
Это правило помещает фоновое изображение на 45 пикселей справа и 20 пикселей снизу контейнера.
Обратите внимание на порядок значений в приведенных выше примерах: ключевые слова и единицы длины. Три или четыре значения background-position
должны следовать этому формату, а ключевое слово должно предшествовать длине или процентной единице.
Это очень простой пример, как спозиционировать фоновое изображение относительно правой стороны или нижней части контейнера. Ведь слева и сверху позиция задается по умолчанию.
Пример позиционирования фона с помощью одно-, двух-, трех- и четырехзначных значений
See the Pen background-position 1, 2, 3, and 4 value syntax by Denis (@deniscreative) on CodePen.dark
Уплывание фона у родительского тега: суть проблемы и ее решение
В статье представлен ряд проблем, которые возникают в ситуациях, когда размеры потомка начинают превышать значения своего родителя. Эта проблема решается операцией, которую программисты называют ресайз окна. Алгоритм ее реализации описан далее.
Довольно часто на практике встречается ситуация, когда дочерний элемент за счет внешних факторов перерастает по размерам своего родителя. Отследить такую ситуацию сложно, поэтому необходимо соблюдать предосторожность во избежание проявления багов.
Предлагаю на практике рассмотреть один из типичных случаев и изучить решение главной проблемы. Для этого смоделируем ситуацию, когда необходимо установить усложненный фон для сайта. Для этого применяют вложенные друг в друга блоки. В коде это выглядит следующим образом:
HTML
<body> <div> <div> <!--содержимое страницы--> </div> </div> </body>
CSS
.wrap { background: url(gradient.png) repeat-x; } .main { width: 980px; margin: 0 auto; }
Вот с этого момента можно столкнутся с типичными проблемами начинающего и неопытного верстальщика.
Обрезанный фон
Первая коварная проблема, которая может возникнуть в данных условиях, будет связана с отрисовкой фона.
Чтобы ее обнаружить следует слегка уменьшить видимую область окна браузера до тех пор, пока не появится полоса прокрутки. После этого теням ползунок, чтобы изучить невидимую область окна. Обнаруживаем, что наш фоновый рисунок не распространяется в невидимую зону. Он занимает ширину окна браузера, а не содержимого.
Проблема распространяется на все популярные браузеры, кроме одного. В этот раз Internet Explower удивляет приятно. Он этой болезнью не страдает.
Почему возникает такая проблема?
Теперь разберемся, от чего получается такая канитель. В нашем примере присутствует родитель wrap, для которого задан фоновый рисунок, и потомок main, у которого в свою очередь задана фиксированная ширина. Так как родитель не имеет точного значения ширины, то он будет ориентироваться на ширину браузера и повторять это значение.
В результате этого выплывает причина разрыва фона. Мы уменьшаем окно браузера меньше значения ширины потомка, из-за чего он становится шире родителя и поэтому появляется белый фон без градиента.
Теперь вернемся к старичку Internet Explower, каким образом его не касается наша проблема? Ответ очень прост, в программе заложено, что ширина родителя всегда должна соответствовать ширине своего потомка, поэтому родитель растянется до габаритов своего содержимого блока.
Смещение центрированного фона
Практически такая же ситуация возникнет при использовании не повторяемого фонового рисунка. Другими словами значение repeat-x изменено на no-repeat. И для большего эффекта установим центровку для фона. В коде это будет смотреться так
CSS
.wrap { background: url(fon.jpg) center center no-repeat; } .main { width: 980px; margin: 0px auto; padding-top:20px; color:#c7c7c7; }
А на практике получится вот такой баг
Причины такого неадекватного представления фона полностью совпадают с описанными выше.
Изменение положения абсолютно позиционированных блоков
Существует еще одна проблема, которая возникает вследствие выпадения потомка из родителя. Рассмотрим абстрактную схему с использованием трех составляющих фона: основная подложка, подложка контейнера и какой-либо значок, который занимает определенную область на странице.
Переходим к примеру кода
HTML
<body> <div></div> <div> <!--содержимое страницы--> </div> </body>
CSS
body { position: relative; background: #eee; } .main { width: 980px; margin: 0 auto; background: #c7c7c7; } .vk { background: url(vk.png) no-repeat; background-size: 50px; width: 50px; height: 50px; position: absolute; right: 0; top: 10px; }
Основная задумка заключается в том, чтобы иконка вконтакте располагалась справа от контента, а не так, как получилось в нашем примере
Решение всех проблем
Решение всех этих проблем до неприличности просто. Достаточно добавить в код CSS свойство, посредством которого родитель никогда не станет меньше потомка. Другими словами, указываем минимально возможное значение для него:
CSS
body { min-width: 980px; }
После этого фон с градиентом никогда не обрежется, отцетрованное фоновое изображение займет правильную позицию, а абсолютно позиционированный объект не будет наплывать на контент.
В каких браузерах работает?
6.0+ | 7.0+ | 9.5+ | 4.0+ | 3.5+ | — | — |
Оценок: 6 (средняя 5 из 5)
Понравилась статья? Расскажите о ней друзьям:
Курсы по CSS (в открытом доступе)
Уровень сложности:
Средний
Еще интересное
Элемент BODY. HTML, XHTML и CSS на 100%
Элемент BODY
Внутри элемента BODY располагается сам документ: весь текст, находящийся между открывающим тегом <BODY> и закрывающим тегом </BODY>, будет отображаться браузером. Все элементы, отвечающие за форматирование документа, помещают внутрь элемента BODY.
Атрибуты элемента BODY применяются для того, чтобы установить общие для всего документа свойства, и в этом отношении возможности данного элемента достаточно большие: можно задать цвет ссылок, параметры фона и т. п.
Сначала рассмотрим атрибуты элемента BODY, управляющие отображением ссылок. Для удобства посетителей страницы надо задавать разные цвета для посещенных, непосещенных и активных ссылок, при этом нужно следить, чтобы они не сливались с цветом фона страницы, потому что это будет неудобно посетителям.
За цвет ссылок отвечают следующие атрибуты элемента BODY:
• alink – задает цвет активной ссылки;
• vlink – определяет цвет посещенной ссылки;
• link – устанавливает цвет непосещенной ссылки.
Цвета ссылок можно задать в HEX-формате или ключевыми словами. Ключевые слова имеет смысл использовать, если вы хотите применить стандартный цвет. Ну а если вы собираетесь устанавливать нестандартные цвета, придется воспользоваться HEX-форматом.
В примере из листинга 1.12 представлены оба варианта записи.
Листинг 1.12. Цвет ссылок
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<base href=»http://www.test.test/» target=»_blank» />
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />
<title>Использование элемента BODY</title>
</head>
<body alink=»#00FF00″ vlink=»red» link=»#330000″>
</body>
</html>
В примере для активной и непосещенной ссылки цвет задан с помощью цифр и букв: они определяют код цвета в шестнадцатеричном формате и записываются в качестве значения соответствующего атрибута после знака #. Для посещенной ссылки цвет задан ключевым словом. Использовать ключевые слова просто. В качестве обозначения цвета с их помощью применяются стандартные названия цветов на английском языке. Указывайте простые названия цветов вроде blue, red, black и не ошибетесь.
Что касается записи цвета в цифрах, то код для нужного цвета можно определить, используя любой графический редактор.
Элемент BODY предоставляет большие возможности для управления фоном страницы. Рассмотрим атрибуты, отвечающие за это.
Для начала надо задать фоновый цвет страницы. Это делается с помощью атрибута bgcolor, значение которого определяет цвет фона. Потом нужно указать фоновый рисунок страницы с помощью атрибута background, значение которого представляет собой адрес файла с рисунком для фона. При этом старайтесь ставить цвет фона, близкий к цветовой гамме фонового рисунка. Это пригодится, если у пользователя не загрузится фоновый рисунок. Когда цвет фона близок к цвету рисунка, не будет дисбаланса в общем виде страницы.
Следующий атрибут управляет прокруткой фона и называется bgproperties. Он определяет, будет ли фон прокручиваться вместе с текстом. Этот атрибут принимает всего одно значение fixed, позволяющее зафиксировать фон документа и не прокручивать его вместе с текстом. В противоположном случае нужно просто удалить этот атрибут. При выборе параметров прокрутки фона надо действовать очень осторожно и следить за тем, чтобы при прокрутке не терялась читаемость текста.
В листинге 1.13 представлен пример использования атрибутов элемента BODY, отвечающих за фон документа.
Листинг 1.13. Параметры фона
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»>
<head>
<base href=»http://www.test.test/» target=»_blank» />
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />
<title>Использование элемента BODY</title>
</head>
<body background=»test.jpg» bgcolor=»#0033CC» bgproperties=»fixed»>
</body>
</html>
В примере из листинга 1.13 файл test. jpg оформлен в синих тонах, поэтому и цвет фона взят из синей гаммы. Прокрутка фона вместе с текстом запрещена.
После того как мы разобрались с фоном, можно задать положение содержимого страницы относительно границ окна браузера.
За отступ от границ окна отвечают следующие атрибуты элемента BODY:
• bottommargin – определяет расстояние от нижнего края окна браузера до содержимого страницы;
• leftmargin – указывает расстояние от левого края окна браузера до содержимого страницы;
• topmargin – задает расстояние от верхнего края окна браузера до содержимого страницы.
Расстояние для всех атрибутов устанавливается в пикселах.
В листинге 1.14 приведен пример указания расстояния до содержимого страницы с помощью атрибутов элемента BODY.
Листинг 1.14. Установка расстояния от границ окна до содержимого страницы
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»>
<head>
<base href=»http://www.test.test/» target=»_blank» />
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />
<title>Использование элемента BODY</title>
</head>
<body topmargin=»10″ leftmargin=»20″ bottommargin=»10″>
</body>
</html>
В примере расстояние сверху и снизу будет по 10 пикселов, а слева – 20 пикселов.
У элемента BODY есть еще два атрибута, которые могут нам пригодиться. Атрибут text отвечает за цвет текста в документе. Когда задаете цвет текста, следите, чтобы он не сливался с фоном страницы.
Атрибут scroll определяет, будет ли в окне документа вертикальная полоса прокрутки. У него всего два значения: yes и no, обозначающие разрешить и запретить прокрутку соответственно. На самом деле запрещать прокрутку не стоит, потому что документ, который у вас на экране виден полностью без проблем, у пользователя с низким разрешением монитора может не поместиться на экране. В итоге без полосы прокрутки он просто не увидит часть документа.
Мы рассмотрели элемент BODY, его возможности и функции. Все параметры, определяемые в этом элементе, влияют на общий вид документа.
Когда вы создаете большие сайты, то со временем можете забыть, что именно делает та или иная часть кода страницы. Комментарии помогут избежать этого.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРесКак сделать большой фон для сайта через CSS
В последнее время большие фоновые изображения в блогах или сайтах стали достаточно популярными. Оно и не удивительно – классно подобранный фон может послужить основным источником восприятия того или иного проекта,
ведь давно известно, что посетитель составляет свое впечатление о сайте в первые 10 секунд. Предлагаю ознакомиться с несколькими CSS техниками для создания большого фонового изображения с использованием одного или двух изображений.
Перед тем, как начать, взгляните на наиболее распространенную ошибку:
Если у вас есть большое фоновое изображение, которое отлично выглядит при разрешении монитора 1280 пикселей, то для бОльших экранов эффект от сайта может быть слегка испорчен из-за «обрезанного фона» (см. рис. выше).
Пример 1.
Самый простой способ избежать этой ошибки – сделать так, чтобы края изображения были такого же цвета, как и фон сайта (BODY background color). Хорошо данный пример иллюстрирует картинка ниже:
Мы видим, что по краям макета используется сплошной цвет для фона. Реализация данного варианта на CSS достаточно проста – вы «прижимаете» изображение фона к верху и центрируете его по центру.
Кстати, в одном из постов я уже рассказывал о свойстве CSS background и его возможностях. Код для примера выглядит так:
body { padding: 0; margin: 0; background: #f8f7e5 url(изображение.jpg) no-repeat center top; width: 100%; display: table;}
Последние 2 строки кода предотвращают уменьшение фонового изображения при изменении размеров окна браузера (в частности в Firefox).
Пример 2. Двойные изображения
В качестве примера используется сайт Design Jobs on the Wall. Здесь для фона задано повторяющееся изображение, а большая картинка помещена в слой DIV, обрамляющий весь код. Реализацию можете глянуть на «живом примере» по ссылке выше, ничего сложного вроде нет.
В качестве большого изображения для фона используется картинка (в формате GIF) с прозрачным фоном, цвет которой максимально приближен к цвету BODY.
Пример 3. Небесный фон.
Для данного варианта используется градиентное изображение в 1 пиксель, которое повторяется горизонтально (задается в теге BODY). Облака центрируются с помощью дополнительного слоя DIV – демо верстки можно глянуть здесь.
Кстати, данный пример можно реализовать и без DIV – смотрите код на демо странице2.
Внимание! Скачать все примеры можно здесь (зеркало).
Данный пост является переводом статьи – How to: CSS Large Background с потрясающего дизайнерского блога webdesignerwall. Кстати там же есть красивая подборка сайтов с большими изображениями для фона.
http://design-mania.ru
Как сделать большой фон для сайта через CSS — Генератор расширений Joomla и многое другое на нашем сайте посвященном работе расширений, компонентов, модулей, плагинов для линейки Joomla. Отправляйте ссылку на страницу своим друзьям и в социальные сети воспользовавшись графическими иконками выше.
Background сайта при помощи CSS и не только
Фон для сайта или Background для сайта, это не всегда одно и тоже самое. Фоны бывают достаточно разные, с различными эффектами, функциями и заливками, весьма стали популярные так называемые резиновые фоны, оно не удивительно, ведь фон будет изменяться под размер активного окна браузера, а это только плюс для сайта. Сейчас мы разберем четыре наиболее популярных метода создания фона для сайта или как говорят в народе background для сайта. Если Вы только начинаете свое знакомство с версткой сайтов, то эти четыре метода создания фона для сайта, будут именно для Вас.
В данном уроке мы рассмотрим все четыре способа создания Background’а (фон для сайта) по детально, которые позволят Вам осуществить задуманное, а именно:
— Фон с одного цвета
— Фон с текстуры
— Фон с помощью градиента
— Фон с большого изображения
Фон для сайта с одного цвета
body { background-color: #83C5E9; /*цвет фона*/ } |
Браузеры по умолчанию сайтам надают фон с белого цвета. Но его можно очень легко сменить на другой. Заходим в файл style.css и к body (тело сайта) прописываем свойствоbackground-color с помощью которого, мы и на дадим фон для сайта с другого цвета. Например свет синий, в HTML коде это будет #83C5E9
Фон для сайта с текстуры
body { background-color: #537759; /*цвет фона*/ background-image: url(images/pattern.png); /*подключаем текстуру*/ } |
Фон с текстуры является популярным способом для создания фона для сайта. Текстуры бывают разные, сложными и простыми узорами, яркие и простые, например, у меня на блоге фоном является текстура и с серого картона.
Все что нам нужно сделать, это подключить нашу текстуру с помощью css свойстваbackground-image, и она автоматически будет повторяться по оси x и оси y, так она заполнит всю нашу страницу. Но для перестраховки еще допишем и цвет фона (текстура у нас зеленая, поэтому логично и цвет фона сделать зеленым #537759).
Фон для сайта с помощью градиента
body { background-color: #83C5E9; /*цвет фона*/ background-image: url(images/gradient.jpg); /*подключаем градиент*/ background-repeat: repeat-x; /*градиент повторяеться по оси x*/ } |
Подключенное изображение с помощью css свойства background-image может повторяться по оси x и y. Использование повтора изображения по оси х обычно используется, чтобы добавить градиент к какому-нибудь веб-элементу, например, для фона кнопок.
По этому мы создаем 1px по ширине линию с градиентом, это и будет наш фон для сайта. Сначала для страховки прописываем цвет фона background-color: #83C5E9; затем подключаем нашу градиентную линию, и с помощью css свойства background-repeat: repeat-x; заставляем нашу 1px линию повторяться по оси x.
У меня на скриншоте изображена большая градиентная линия, так делать не нужно, она должна быть 1px по ширине.
Большое фоновое изображение
body { background-color: #000000; /*цвет фона*/ background-image: url(images/bg-image.jpg); /*подключаем изображения*/ background-position: center top; /*позиция изображения, по центру экрана, прижатого к вверх*/ background-repeat: no-repeat; /*не повторять изображение ни по одной оси*/ } |
Суть этого способа, в том, что загружается большое фоновое изображение, которое размещается по центру экрана и прикрепленное к верху.
Но не забывайте оптимизировать ваше изображение для того, чтобы страница загружалась быстрее, самое лучшее это фоновое изображение из векторной графики. Все комментарии в коде.
Читайте также:
background — CSS: Каскадные таблицы стилей
Сокращенное свойство CSS background
одновременно устанавливает все свойства стиля фона, такие как цвет, изображение, начало и размер или метод повтора.
фон: зеленый;
фон: url ("test.jpg") repeat-y;
фон: рамка красная;
фон: без повтора центр / 80% url ("../ img / image.png");
фон: наследование;
фон: начальный;
фон: вернуться;
фон: не установлен;
Свойство фон
определяется как один или несколько фоновых слоев, разделенных запятыми.
Синтаксис каждого уровня следующий:
- Каждый уровень может включать в себя ноль или одно вхождение любого из следующих значений:
-
<приложение>
-
-
<позиция>
-
<размер>
-
<стиль повторения>
-
- Значение
center / 80%
». - Значение
background-origin
иbackground-clip
. Если он включен дважды, первое вхождение устанавливаетbackground-origin
, а второе устанавливаетbackground-clip
. - Значение
[,] * , где
= || [/ ]? || <стиль повторения> || <приложение> || ||
= <'background-color'> || || [/ ]? || <стиль повторения> || <приложение> || || , где
= none |
= [[слева | центр | право | наверх | внизу | <длина-процент>] | [слева | центр | право | <длина- процент>] [наверх | центр | внизу | <длина-процент>] | [центр | [слева | справа] <длина-процент>? ] && [центр | [наверх | внизу] <длина-процент>? ]]
= [ | авто] {1,2} | крышка | содержат
= repeat-x | повторять-у | [повторить | пространство | круглый | без повтора] {1,2}
= scroll | фиксированный | local
= рамка-рамка | обивка | content-box , где
= | <изображение ()> | <набор изображений ()> | | <краска ()> | <плавное затухание ()> | <градиент>
<длина-процент> = <длина> | <процент>где
= image ( ? [ ?, ?]!)
= image-set ( #)
= element ( )
= paint ( , ?)
<плавное затухание ()> = плавное затухание (, ?)
<градиент> =| <повторяющийся линейный градиент ()> | <радиальный градиент ()> | <повторяющийся радиальный градиент ()> | , где
= ltr | rtl
= | <строка>
<цвет> =| | | | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <устаревший системный цвет>
<параметр-набор-изображений> = [<изображение> | <строка>] [<разрешение> || type ()]
=
= <процент>? && <изображение>
= <изображение> |
= linear-gradient ([ | to ]?, )
= повторяющийся-линейный-градиент ([<угол> | до <стороны- или-угла>]?, <список-остановок-цветов>)
<радиальный-градиент ()> = радиальный-градиент ([<конечная-форма> ||]? [at ]?, )
= повторяющийся-радиальный-градиент ([ || <размер >]? [at ]?, )
= conic-gradient ([from ]? [at ] ?, ) где
= rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)
= rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?)
= hsl ( [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)
<сторона-или-угол> = [слева | справа] || [наверх | внизу]
<список-остановок-цветов> = [<остановка-цветов> [, <подсказка-цветов>]? ] #,
= круг | эллипс
<размер> = ближайшая сторона | дальняя сторона | ближайший угол | дальний угол | <длина> | <длина- процент> {2}
<позиция> = [[слева | центр | справа] || [наверх | центр | внизу] | [слева | центр | право | <длина- процент>] [наверх | центр | внизу | <длина-процент>]? | [[слева | справа] <длина-процент>] && [[вверх | снизу] <длина-процент>]]
<угловой-список-остановок> = [<угловой-цвет-стоп> [, <угловой-цвет-подсказка>]? ] #, <угловой-цветной-стопор>, где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> | <угол>
= ?
<линейный-цвет-подсказка> = <длина-процент>
<угловой-цвет-остановка> = <цвет> && <цвет-стоп-угол>?
= , где
= {1,2}
= {1,2}
<угол-процент> = <угол> |
15 потрясающих фоновых эффектов CSS — 1stWebDesigner
Знаете ли вы, что с помощью CSS можно создавать красивые анимации и интересные эффекты? В сочетании с HTML и JavaScript или даже сам по себе CSS может быть чрезвычайно мощным.Вы будете удивлены тем, что могут создать разработчики. От простой анимации прокрутки до сложной среды, полностью построенной на коде, эти фоновые эффекты CSS могут добавить индивидуальности вашему сайту.
Что, если бы вы могли бесплатно использовать фоновые эффекты CSS, созданные другими? Такие сайты, как CodePen, были созданы для размещения кода с открытым исходным кодом или другого свободно лицензируемого кода, что означает, что вы можете использовать его в своих собственных проектах с минимальными условиями.
Это также полезно для дизайнеров, которые хотят изучить CSS или создать похожий, но индивидуальный вид.Вы можете использовать эти фрагменты кода в качестве основы для создания собственных эффектов.
Множество разработчиков создали потрясающие фоновые эффекты CSS и бесплатно выпустили их. Сегодня мы собрали 15 самых потрясающих из них. Убедитесь сами, что вы можете сделать с творческим умом и небольшим кодом!
НЕОГРАНИЧЕННАЯ ЗАГРУЗКА: шаблоны электронной почты, администратора, целевой страницы и веб-сайтов
Всего от 16,50 $ в месяц!
СКАЧАТЬ
См. Фон Pen Parallax Star в CSS от Саранша Синха (@saransh) на CodePen.свет
Смотрите Pen Pure CSS Gradient Background Animation от Мануэля Пинто (@ P1N2O) на CodePen.light
См. Эффект матового стекла Pen CSS only от Gregg OD (@GreggOD) на CodePen.light
См. CSS «Только перо»: «Падающая звезда» Юсуке Накая (@YusukeNakaya) на CodePen.light
Посмотрите книгу Pen Tri Travelers от Нейта Уайли (@natewiley) на CodePen.light
См. Pen ColorDrops от Nate Wiley (@natewiley) на CodePen.light
См. Заголовок фона с анимацией пером от Джаспера ЛаШанса (@jasperlachance) на CodePen.свет
См. Pen Zero Element: DeLight Кейта Кларка (@keithclark) на CodePen.light
См. Анимацию светящихся частиц CSS Pen от Нейта Уайли (@natewiley) на CodePen.light
См. Эффект прокрутки фонового изображения Pen Pure CSS от carpe numidium (@carpenumidium) на CodePen.light
См. Pen CSS Multiple Background Image Parallax Animation от carpe numidium (@carpenumidium) на CodePen.light
Посмотрите эффект Pen Bokeh (CSS) Луи Хобрегтса (@Mamboleoo) на CodePen.свет
См. Экран входа в систему Pen Calm breeze от Леви Хасси (@Lewitje) на CodePen.light
См. Градиент текста с эффектом пера от Diogo Realles (@SoftwaRealles) на CodePen.light
Креативно красивые фоновые эффекты CSS
Хороший веб-дизайн производит неизгладимое впечатление на посетителей, и всегда есть что-то особенное в хорошо сделанной анимации. Если вы изо всех сил стараетесь использовать анимированный звездный или градиентный фон, или просто добавляете элегантные и тонкие эффекты параллакса на свой сайт, он может творить чудеса с вашим дизайном.
CodePen содержит исключительно открытый исходный код, сделанный разработчиками в качестве вклада в сообщество. Итак, если один из этих эффектов привлек ваше внимание, не стесняйтесь копировать его, настраивать или использовать в качестве основы для создания собственных анимаций CSS.
Просто не забудьте использовать ту же лицензию, и все на CodePen можно использовать бесплатно.
Примечание редактора: эта статья последний раз обновлялась 2 сентября 2020 г.
Этот пост может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .
CSS-фонов — Сообщество разработчиков
Фон в CSS используется для добавления эффектов на веб-страницу в виде цветов или изображений.
Фон можно применить ко всей веб-странице или к ее части.
В этом посте мы будем использовать следующие фрагменты с небольшими изменениями. Сохраните фрагменты с расширениями .html
и .css
соответственно и помните, что все фрагменты HTML будут в теге body .
Lorem ipsum dolor sit amet, conctetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Войти в полноэкранный режимВыйти из полноэкранного режима div {
отступ: 1.2em; / * некоторый внутренний интервал * /
цвет: #ffffff; / * цвет текста. это будет белым * /
размер шрифта: 1.2em; / * размер шрифта, эквивалентный 19,2 пикселей * /
цвет фона: # 1560bd; / * вариант синего цвета * /
}
Войти в полноэкранный режимВыйти из полноэкранного режимаОбратите внимание, что все скриншоты сделаны из веб-браузера Firefox 70 и его инструментов разработчика.
Следующие свойства CSS используются для добавления или управления фоном веб-страницы:
-
цвет фона
-
фоновое изображение
-
фоновый повтор
-
фон-приставка
-
фон-позиция
-
фон
цвет фона
Мы использовали это свойство в конце последнего поста, это свойство устанавливает цвет фона элемента, либо значение цвета, либо ключевое слово transparent
.
Загрузите HTML-файл в браузер.
Полученное изображение в браузере и Developer Tools показывают, что текст доступен. Ура!
фоновое изображение
Фоновое изображение всей страницы или ее части можно изменить с помощью свойства background-image
.
Рекомендуется указывать background-color
, который будет использоваться, когда изображение недоступно, а когда изображение доступно, оно отображается поверх цвета фона.
Свойство background-image
может принимать два свойства:
- Функция
url ()
, которая будет указывать на местоположение изображения - Ключевое слово
none
, когда изображение не используется.
Обновите свой CSS, чтобы он соответствовал приведенному ниже, и сохраните файл.
div {
/ *
* Функция url () принимает расположение файла.
* Это может быть файл в вашей системе или в Интернете.
* в этом примере изображение находится на моем локальном компьютере в папке
* с именем img.* Если ваш файл находится в Интернете, он будет выглядеть так:
* url ('https://example.com/my_image.jpg')
* /
фоновое изображение: url ('img / hd_10.jpg'); / * Изображение заднего плана * /
цвет: #ffffff; / * Цвет текста * /
отступ: 1.2em; / * Некоторые отступы для внутреннего интервала * /
}
Войти в полноэкранный режимВыйти из полноэкранного режимаЗагрузите HTML-код в браузер. Ваш результат должен быть похож на изображение ниже.
Тогда что произойдет, если изображение не загрузится?
Давайте разберем наш код на , удалив часть расширения изображения.
div {
/ *
* Расширение изображения было изменено путем удаления
* 'g' в расширении, и у нас остается 'jp'.
* /
фоновое изображение: url ('img / hd_10.jp'); / * Обратите внимание на расширение изображения * /
цвет: #ffffff;
отступ: 1.2em;
}
Войти в полноэкранный режимВыйти из полноэкранного режимаСохраните файл. Обновите ваш браузер. Текст будет нечитабельным.
Теперь вопрос: Как мы можем сделать этот текст доступным для чтения, когда изображение не загружается или недоступно?
Сначала вернем наше изображение, изменив наш код.Выполните следующие шаги:
- Добавить удаленную часть добавочного номера
- Сохраните файл и обновите страницу в браузере
- Подтвердите, что изображение загружено
У нас все хорошо? Текст можно будет прочитать, если мы предоставим резервный цвет, который браузер будет использовать, когда изображение недоступно.
Указанный нами резервный цвет должен соответствовать следующему требованию:
- Цвет должен быть похож на цвет изображения или части страницы, на которой отображается текст
Убедитесь, что ваш код исправлен и изображение загружено.Теперь переключитесь в свой браузер и выполните следующие действия:
- Используйте «Проверить элемент» в тексте абзаца
- На вкладке Rules щелкните цветной кружок рядом с шестнадцатеричным цветовым кодом
- Щелкните значок с черным верхом, это активирует инспектор, такой как инструмент
- Наведите инструмент на фоновое изображение текста, появится цветовой код в шестнадцатеричном формате.
- Это будет наш запасной цвет.
Теперь, когда у нас есть запасной цвет, давайте обновим наш CSS этим цветом:
div {
/ * Все остальные свойства остаются прежними * /
цвет фона: # 213a59; / * Резервный цвет фона * /
}
Войти в полноэкранный режимВыйти из полноэкранного режимаСохраните файл и обновите страницу в браузере. Вы не увидите никаких изменений (пока).
Выполните следующие шаги:
- Взломайте код, удалив часть расширения изображения , как мы это делали раньше.
- Сохраните и обновите страницу в браузере.
Цвет фона теперь вступает в силу, когда изображение не загружается, и результат будет таким же, как если бы изображение было там.
Имейте в виду, что фоновое изображение также может быть применено ко всей веб-странице.
фон-повтор
Если задано фоновое изображение, это свойство указывает, повторяется ли изображение и как.
Это свойство принимает следующие значения
-
repeat
— Изображение повторяется как по горизонтали, так и по вертикали. -
repeat-x
— Изображение повторяется только по горизонтали. -
repeat-y
— Изображение повторяется только по вертикали. -
no-repeat
— Изображение не повторяется: рисуется только одна копия изображения. -
inherit
— направление повтора наследуется от родительского элемента.
Продемонстрируем некоторые из этих свойств. Чтобы продолжить, я рекомендую вам использовать изображение небольшого размера.
Изображение, которое я буду использовать в фрагментах кода, имеет размеры 395 на 463 , что означает:
- Ширина изображения
395
пикселей - Высота изображения
463
пикселей
Учитывая фрагмент кода ниже:
кузов {
фоновое изображение: url ('img / hd_11.jpg ');
цвет: #ffffff;
}
Войти в полноэкранный режимВыйти из полноэкранного режимаСохраните файл и обновите страницу в браузере.
Если вы последовали моей рекомендации и использовали изображение небольшого размера для фона, изображение будет мозаично в направлении по горизонтали и по вертикали .
Теперь обновите декларацию body
следующим образом:
кузов {
/ * Все остальные свойства остаются прежними * /
цвет фона: #dddddd; / * добавлено, чтобы увидеть мозаику изображения * /
фон-повтор: повтор-х; / * изображение будет повторяться в горизонтальном направлении * /
}
Войти в полноэкранный режимВыйти из полноэкранного режимаВ результате в браузере будет отображаться мозаика изображения в горизонтальном направлении.Серое фоновое изображение позволит вам это увидеть.
Измените направление повтора на repeat-y
и сохраните файл.
кузов {
/ * Все остальные свойства остаются прежними * /
фон-повтор: повтор-у; / * изменение на это значение * /
}
Войти в полноэкранный режимВыйти из полноэкранного режимаРезультат в браузере:
Если мы используем значение no-repeat
, браузер покажет только одно изображение:
кузов {
/ * Все остальные свойства остаются прежними * /
фон-повтор: повтор-у; / * изменение на это значение * /
}
Войти в полноэкранный режимВыйти из полноэкранного режимаРезультат в браузере:
фон-приставка
Вложение фона
указывает, фиксируется ли фон относительно области просмотра или прокручивается вместе с содержащим блоком.
Заполните HTML-код достаточным количеством текста , чтобы браузер мог добавить полосу прокрутки.
Другой альтернативный способ — увеличить размер шрифта текста до
.
Добавьте это в свой CSS:
п {
размер шрифта: 4em;
}
Войти в полноэкранный режимВыйти из полноэкранного режима Обновите объявления свойств элемента тела , чтобы они соответствовали следующему:
кузов {
фоновое изображение: url ('img / hd_11.jpg ');
цвет: #ffffff;
фон-повтор: повторять; / * мозаика изображения как по горизонтали, так и по вертикали * /
background-attachment: исправлено; / * фоновое изображение не перемещается при прокрутке * /
}
Войти в полноэкранный режимВыйти из полноэкранного режимаСохраните файлы и обновите страницу в браузере. Если вы прокрутите, вы увидите, что фоновое изображение прикреплено к области просмотра.
Я предоставил два изображения, чтобы мы могли наблюдать и замечать изменения.
Веб-страница с фиксированным фоном Веб-страница с фоновой позицией для прокрутки фон-позиция
Это свойство определяет начальную позицию фонового изображения.Если мы укажем только одно значение, браузер примет второе значение как центр
.
Если хотя бы одно значение не является ключевым словом, то:
- Первое значение представляет горизонтальное положение
- Второй представляет вертикальное положение.
Допускаются отрицательные значения в процентах и длине.
Обновите правило CSS body
, чтобы оно соответствовало следующему:
кузов {
фон-повтор: без повторения;
цвет фона: #dddddd;
фоновая позиция: 50% 10%; / * Обратите внимание на это * /
}
Войти в полноэкранный режимВыйти из полноэкранного режимаСохраните и обновите страницу в браузере.
Вы также можете указать положение фона с помощью ключевых слов.
Вот несколько background-position
, которые вы можете попробовать.
-
background-position: вверху справа;
-
background-position: снизу слева;
-
background-position: bottom;
-
background-position: right;
Используйте следующий алгоритм, чтобы опробовать приведенные выше коды:
- Обновите объявление body , указав любую позицию фона и его значение
- Сохраните файл
- Обновите браузер и посмотрите результат
- Вернуться к 1
фон
Свойство background
— это сокращенное свойство для установки индивидуальных свойств фона background-color
, background-image
, background-repeat
, background-attachment
и background-position
в том же месте в ваш CSS.
Следующий код можно использовать для достижения почти всего, что мы продемонстрировали до сих пор.
кузов {
цвет: #ffffff;
/ *
* 1. изображение
* 2. резервный цвет
* 3. background-position
* 4. фоновый повтор
* 5. фон-вложение
* /
/ * 1 * / / * 2 * / / * 3 * / / * 4 * / / * 5 * /
фон: url ('img / hd_11.jpg') # 213a59 Исправлено 50% повторения;
}
Войти в полноэкранный режимВыйти из полноэкранного режимаВы можете оказаться в ситуации, когда у вас есть несколько повторяющихся объявлений свойств в вашем коде CSS.
Что бы вы почувствовали, если бы вы могли просто объявить свойство один раз, а затем использовать его несколько раз?
Вот когда CSS-переменные могут оказаться очень полезными, и это следующее.
Установить или изменить цвет фона HTML
Сегодня веб-сайт отображает не только текст. Все мы знаем, что мы можем добавлять или изменять некоторые элементы в HTML. Мы можем добавить изображение, видео, аудио или изменить цвет и стиль. Теперь в этом руководстве мы узнаем о том, как установить или изменить цвет фона HTML с помощью шестнадцатеричных цветовых кодов, имен цветов HTML и значений RGB.
Определение и использование.Свойство HTML background-color задается для изменения или установки цвета фона элемента. Фон — это общий размер элемента, включая отступы и границу, но не поля.
Установить свойство background-color в элементе HTML
Первый начинается с цвета фона элемента
. Когда вы вставите его в элемент, у вас будет полный цвет страницы.Раскрасить тело веб-страницы довольно просто. Просто следуйте этому коду, чтобы установить цвет фона HTML в элементе.Пример 1:
Документ
Вот как HTML-код выше будет отображаться в браузере:
Можно ли установить цвет фона HTML в элементе? Да мы можем.Например, мы изменим цвет фона элемента
Пример 2:
Документ
Раскрашивание фона элемента div
Это абзац
Раскрашивание фона элемента div
Это абзац
Раскрашивание фона элемента div
Это абзац
Вот как HTML-код выше будет отображаться в браузере:
Установите цвет фона с помощью шестнадцатеричного цветового кодаШестнадцатеричный цветовой код со свойством background-color — самый популярный способ установить цвет фона HTML.Цвет Hex имеет хэштег ‘#’ и цветовой код RRGGBB (#RRGGBB). Это пример применения шестнадцатеричного цветового кода непосредственно к элементу HTML.
Пример 3:
Документ
Раскрашивание фона элемента div с использованием шестнадцатеричного цвета
Цвет шестигранника # FF0000
Раскрашивание фона элемента div с использованием шестнадцатеричного цвета
Цвет шестигранника # 00FF00
Раскрашивание фона элемента div с использованием шестнадцатеричного цвета
Цвет шестнадцатеричного кода # 0000FF
Вот как HTML-код выше будет отображаться в браузере:
Установить цвет фона с помощью имени цвета HTML
Второй способ установить цвет фона в HTML — использовать имя цвета HTML.Название цвета — это самый простой способ изменить цвет в HTML-документе. Просто введите название цвета, например Red, Green или Blue, со свойством background-color.
Пример 4:
Документ
Раскрашивание фона элемента div с использованием названия цвета
Название цвета Красный
Раскрашивание фона элемента div с использованием названия цвета
Название цвета: зеленый
Раскрашивание фона элемента div с использованием названия цвета
Название цвета: синий
Раскрашивание фона элемента div с использованием названия цвета
Название цвета Голубой
Раскрашивание фона элемента div с использованием названия цвета
Название цвета Пурпурный
Раскрашивание фона элемента div с использованием названия цвета
Название цвета Желтый
Вот как HTML-код выше будет отображаться в браузере:
Установить цвет фона с использованием значений цвета RGBТеперь мы установим свойство HTML background-color, используя значения RGB.Используйте тот же атрибут стиля, что и раньше, но замените шестнадцатеричный цвет или имя цвета на значения RGB.
Пример 5:
Документ
Раскрашивание фона элемента div с использованием значений RGB
Значения RGB rgb (255,0,0)
Раскрашивание фона элемента div с использованием значений RGB
Значения RGB rgb (0,255,0)
Раскрашивание фона элемента div с использованием значений RGB
Значения RGB rgb (0,0,255)
Вот как HTML-код выше будет отображаться в браузере:
При использовании значений RGB у вас есть дополнительная опция для установки, указывающая уровень непрозрачности с альфа-каналом.Это будет контролировать уровень прозрачности фона. Альфа объявляется с «а». Если используется альфа, код формата — «rgba». Значение альфа — 0 и 1, 0 для полной прозрачности и 1 для непрозрачности. Это пример использования значений «rgba».
Пример 6:
Документ
Раскрашивание фона элемента div с использованием RGB с альфа-каналом
rgba (255,0,0,0.5)
Раскрашивание фона элемента div с использованием RGB с альфа-каналом
rgba (0,255,0,0.5)
Раскрашивание фона элемента div с использованием RGB с альфа-каналом
rgba (0,0,255,0.5)
Вот как HTML-код выше будет отображаться в браузере:
Установить цвет фона с использованием значений цвета HSLЦветовые значения HSL менее популярны, чем раньше.HSL — это оттенок, насыщенность и яркость. Просто следуйте тому же синтаксису, что и значения RGB, чтобы использовать их для установки цвета фона HTML.
Пример 7:
Документ
Вот как HTML-код выше будет отображаться в браузере:
Как и в случае с RGB, вы также можете добавить альфа-канал, чтобы установить уровень непрозрачности для значений HSL.
Пример 8:
Документ
Раскрашивание фона элемента div с помощью HSL с альфа-каналом
hsla (0,100%, 50%, 0,5)
Вот как HTML-код выше будет отображаться в браузере:
Есть несколько способов установить или изменить цвет фона HTML.Это так легко и просто, запомните это, если вы хотите установить цвет, используйте атрибут «style» и свойство CSS background-color. Синтаксис такой:
<тег>
Если вы хотите узнать больше о цветовом коде, вы можете увидеть в предыдущем руководстве о цветовых кодах HTML. Вы можете найти полный исходный код этих примеров на нашем GitHub.
Это только основное. Если вам нужно больше узнать о HTML, CSS, Javascript или других подобных областях, вы можете пройти следующий дешевый курс:
Спасибо!
Изменить свойства элемента с помощью CSS на основе идентификатора тела или класса
В этом посте показана техника, аналогичная той, что использовалась в моих CSS-спрайтах — включение одной из кнопок с постом с идентификатором тела, сделанным на днях.В этом посте я покажу, как изменить конкретный элемент на странице в зависимости от идентификатора или класса тела. В этом примере это изменение заголовка, который отображается вверху страницы.
Примеры веб-сайтов
Пример, представленный в этом посте, используется на двух моих веб-сайтах: Новозеландском календаре бега и Австралийском календаре бега. Два веб-сайта используют один и тот же код, но настроены на использование разной базы данных; оба доменных имени указывают на один и тот же каталог на сервере.
(В конечном итоге, когда австралийский календарь заполнится контентом, я перенесу его на австралийский сервер, но это еще не все).
За исключением некоторых различий в навигации, макет шаблона идентичен для обоих сайтов, за исключением шапки. Заголовок — это большое повторяющееся фоновое изображение, которое включает фоновое изображение, логотип и верхний фон навигации.
На новозеландском сайте это доменное имя www.runningcalendar.co.nz и на австралийском сайте www.runningcalendar.com.au
Фоновое изображение masthead управляется с помощью CSS во внешнем файле CSS, а идентификатор / класс
устанавливается по-разному для каждой страны.Установка идентификатора / класса тела
Элемент
на этих веб-сайтах уже имеет идентификатор, связанный с типом страницы, это по другой причине, поэтому на этих сайтах я добавил класс к тегу в зависимости от страны это примерно так:и:
Это может быть так же легко установленный идентификатор, если я еще не использовал идентификатор для других целей:
и:
Установка шапки с помощью CSS
Обычно я бы просто установил шапку в качестве фона в настройках основного текста файла CSS.Так я настроил его изначально, когда была только новозеландская версия сайта.
Оригинальный способ:
кузов{ фон: белый URL (/themes/common/images/masthead.jpg) в центре вверху repeat-x; }
Теперь, когда у меня есть две версии веб-сайта, каждая из которых требует отдельного заголовка, фон основного текста нужно настраивать по-разному, в зависимости от того, какой это сайт. С набором классов, как показано в разделе выше, это можно сделать так:
body.countryNZ { фон: белый URL (/ themes / common / images / masthead-nz.jpg) по центру вверху repeat-x; } body.countryAU { фон: белый URL (/themes/common/images/masthead-au.jpg) по центру вверху repeat-x; }
Обратите внимание, что это «тело» плюс имя класса. Если использовать идентификатор тела, это можно сделать так:
body # countryNZ { фон: белый URL (/themes/common/images/masthead-nz.jpg) по центру вверху repeat-x; } body # countryAU { фон: белый URL (/themes/common/images/masthead-au.jpg) по центру вверху repeat-x; }
Другое использование
Я только что проиллюстрировал эту технику для установки фонового изображения, но очевидно, что это можно сделать для любого элемента на странице в сочетании с классом или идентификатором тела.
Десять примеров для установки изображения с помощью свойства фонового изображения CSS
Назначение свойства фонового изображения CSSСвойство CSS background-image используется для установки фонового изображения элементов HTML, таких как div, абзацы, заголовки, заголовки таблиц, тело и т. Д.
Вы можете устанавливать изображения с разными расширениями, такими как png, jpg, gif, svg и т. Д.
Вы также можете использовать одно или несколько изображений для установки фона элементов с помощью CSS3. Например:
Настройка фона отдельного изображения:
background-image: url («images / demo.jpg ”); |
Или используйте сокращенное свойство фона:
фон: url («images / demo.jpg»); |
Вы также можете использовать абсолютный путь:
фоновое изображение: & nbsp; url («http: // www.example.com/images/demo.jpg »); |
Установка нескольких фоновых изображений:
background-image: url («images / image1.jpg»), url («images / image2.jpg»), url («images / image3.jpg»);
Ниже приведены демонстрации различных способов использования свойства CSS background-image. Я буду использовать одиночные и множественные изображения с переходом, положением и другими значениями. Вы также можете увидеть живые демонстрации с каждым примером.
Простой пример установки фонового изображения для divСоздается класс CSS, в котором используется фоновое изображение.Класс назначается тегу
Следующий класс устанавливает фоновое изображение:
.divbk { background-image: url («images / sunset.jpg»); высота: 400 пикселей; ширина: 450 пикселей; } |
Пример установки резервного цвета
Если по какой-то причине фоновое изображение не может быть загружено в браузеры пользователя: из-за скорости Интернета, медленного сервера или проблемы с браузером, вы можете установить резервный цвет в свойстве фона следующим образом:
фон: url («images / sunset1.jpg ») #eee;
Посмотреть демонстрацию онлайн:
См. Онлайн-демонстрацию и код В URL-адресе для демонстрации дано неправильное имя изображения. Поскольку изображение недоступно, вместо него используется цвет фона:
.divbk { фон: url («images / sunset1.jpg») # A3B8C0; высота: 400 пикселей; ширина: 450 пикселей; } |
Демонстрация нескольких фоновых изображений
В этом примере я использовал два изображения в свойстве CSS3 background-image.Наряду с настройкой фоновых изображений используются следующие свойства background position и background-repeat:
См. Онлайн-демонстрацию и код Вот как несколько изображений устанавливаются с другими свойствами CSS:
background-image: url («images / car.jpg»), url («images / motoway.jpg»); высота: 500 пикселей; ширина: 400 пикселей; background-position: center, left; фоновый повтор: без повтора; |
Повторение фона используется для предотвращения повторения изображения с помощью значения no-repeat .Хотя вы можете установить положение обоих изображений, используя разные направления.
Если вы не укажете положение, по умолчанию будет в левом верхнем углу для обоих изображений.
Отображение фонового изображения с прозрачностью или непрозрачностьюХотя нет свойства для установки прозрачных изображений, установленных в качестве фона с помощью CSS, вы можете использовать Photoshop или какой-либо другой инструмент, чтобы сделать изображения прозрачными.
В CSS одним из способов может быть использование фона с linear-gradient и использование там RGB, что позволяет установить непрозрачность.
Следующий пример демонстрирует, как это можно сделать:
См. Онлайн-демонстрацию и код Полный код вы можете увидеть на демонстрационной странице. Это CSS, используемый для достижения непрозрачности фона в изображении:
1 2 3 4 5 6 7 8 9 10 11 12 13 140002 14 18 19 | .divbk { высота: 450 пикселей; ширина: 400 пикселей; фон: -webkit-linear-gradient (сверху, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url («images / motoway.jpg»); фон: -o-linear-gradient (сверху, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url («images / motoway.jpg»); фон: -ms-linear-gradient (top, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url («images / motoway.jpg «); фон: -moz-linear-gradient (top, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url (» images / motoway.jpg «); фон: -webkit-gradient (линейный, слева вверху, внизу слева, остановка цвета (0%, rgba (255,255,255,0,7)), остановка цвета (100%, rgba (255,255,255,0,7))), URL-адрес («images / motoway.jpg»); фон: linear-gradient (вверх, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url («images / motoway.jpg) «); } |
Свойство CSS3 совместимо со всеми основными браузерами; однако вам придется обращаться с каждым отдельно.Например, в Mozilla Firefox вы должны использовать эту строку:
фон: -moz-linear-gradient (вверху, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0,7) 100%), url («images / motoway.jpg»); |
В этом примере я использовал ту же высоту и ширину для div, что и изображение. Если у вас есть меньшее изображение или больший div, используйте свойство repeat, как показано ниже:
фон: linear-gradient (to top, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url («images / motoway.jpg» повторяется 0 0); |
В случае вышеприведенного примера изображение не будет повторяться, а пустое пространство будет заполнено заданным цветом RGB.
Обратите внимание, что я использовал то же изображение, что и в приведенном выше примере, с несколькими фоновыми изображениями.
Использование фонового изображения в таблицах HTMLВы также можете установить фоновые изображения для элементов таблицы, используя свойство CSS background image.Заголовок таблицы и изображения данных таблицы могут быть установлены отдельно. Если вы установите фоновое изображение в основном теге
1 2 3 4 5 6 7 8 9 10 11 12 13 140002 14 18 19 20 21 22 23 24 25 26 27 28 29 30 000 3435 36 37 | .демотбл { граница-обрушение: обрушение; } .demotbl th { цвет: # EAE635; размер шрифта: 20 пикселей; фон: url («images / CSS-background-image-table.jpg»); высота: 50 пикселей; ширина: 150 пикселей; радиус границы: 6 пикселей; } .demotbl td { граница: 1 пиксель, пунктирная черная; бордюр-верх: нет; цвет: # 002F5E; отступ: 15 пикселей; ширина: 100 пикселей; цвет фона: # D2E6FB; } |
Вы можете увидеть полный код на демонстрационной странице.
В качестве альтернативы вы можете использовать свойства CSS3, такие как градиент, для создания изображения, похожего на внешний вид, с помощью цветов. Здесь написано руководство.
Установка фонового изображения на всю страницу Пример CSSВ следующем примере я покажу вам, как можно установить изображение в качестве полноэкранного фона для страницы.
Вы можете увидеть полный код и демонстрацию, щелкнув ссылку ниже.
См. Онлайн-демонстрацию и код Установка полного фонового изображения для примера divТочно так же вы можете использовать background-image с другими свойствами фона, чтобы создать крошечное изображение, покрывающее весь контейнер или заданные элементы.Например, вы хотите использовать фоновое изображение для верхнего, нижнего колонтитула, левой навигации или других элементов веб-страницы, а не на всю страницу.
Для этой демонстрации я использую крошечное изображение, которое повторяется, чтобы покрыть все пространство элементов div.
См. Онлайн-демонстрацию и код CSS:
фон: url («images / background.jpg») центр центр исправлен; фон-повтор: повторение; высота: 300 пикселей; ширина: 200 пикселей; |
Однако, прежде чем использовать это, рассмотрите проблемы скорости с кешем браузера.
Установка размера фонового изображенияИспользуя свойство background-size с background-image, вы можете установить высоту и ширину фонового изображения.
Синтаксис использования свойства CSS background-size, например:
размер фона: 200 пикселей 300 пикселей;
Где первое значение представляет ширину, а второе указывает высоту изображения.
См. Пример ниже:
См. Онлайн-демонстрацию и код Вы также можете указать высоту и ширину в процентах.Например:
background-image: url («images / banana.jpg»); размер фона: 70%; |
Вы должны использовать background-repeat: no-repeat; в этом случае, в противном случае оставшееся пространство контейнера (в этом случае div) будет заполнено этим изображением.
Применение преобразования к фоновым изображениямИспользуя свойство transform с сокращением фона или свойствами фонового изображения, вы также можете вращать и масштабировать изображения.
Ниже приведены несколько примеров использования свойства transform с фоновыми изображениями:
Демонстрация поворота изображения на 20 градусов
См. Онлайн-демонстрацию и код CSS:
фон: url («images / bk.jpg»); преобразование: поворот (20 градусов); |
Точно так же вы можете наклонять, масштабировать и переводить фоновые изображения с помощью свойства transform.
Ниже приведен пример, в котором используется перекос со значениями x и y:
См. Онлайн-демонстрацию и код Следующий CSS используется для перекоса изображения с помощью свойства transform:
1 2 3 4 5 6 7 8 9 10 11 12 13 140002 14 18 19 20 21 22 23 24 25 26 27 28 29 30 000 3435 36 37 | .divbk { фон: url («images / bk.jpg»); -webkit-transform: skew (10deg, 10deg); -moz-transform: skew (10deg, 10deg); -ms-преобразование: наклон (10deg, 10deg); -о-преобразование: наклон (10deg, 10deg); преобразование: наклон (10deg, 10deg); высота: 230 пикселей; ширина: 215 пикселей; поля: 42 пикселя; } .контейнер { бордюр: сплошной черный 1 пиксель; высота: 400 пикселей; ширина: 300 пикселей; цвет фона: # D5E6F4; } |
См. Полный код, щелкнув изображение или ссылку выше.
Последнее словоСвойство CSS background-image следует использовать, если оно является частью дизайна, а не содержимым.Изображения маленькие и должны повторяться. Вы можете смешивать небольшие изображения со свойствами CSS3.
Если ваши изображения являются частью дизайна, вам следует использовать свойство background-image, например, в фоне заголовка, в качестве полного фона веб-страницы, заголовков таблиц и т. Д.
Если изображения предназначены для содержания и имеют некоторое семантическое значение, вам следует использовать тег для включения изображений на вашу веб-страницу. Вы можете использовать тегов alt и в теге , которые важны для целей SEO, чтобы также донести смысл до поисковых систем.
Если вы хотите включать изображения, если веб-страницы печатаются по умолчанию, вам следует использовать тег .
CSS Фон
Свойство background-color определяет цвет фона элемента.
Цвет фона страницы устанавливается следующим образом:
В CSS цвет чаще всего задается следующим образом:
Посмотрите на CSS Color Values полный список возможных значений цвета.
В приведенном ниже примере элементы
,
и
Пример
h2 {цвет фона: зеленый;
}
div {
цвет фона: светло-голубой;
}
p {
цвет фона: желтый;
}
Свойство background-image определяет изображение для использования в качестве фона элемента.
По умолчанию изображение повторяется, чтобы покрыть весь элемент.
Фоновое изображение для страницы может быть установлено следующим образом:
Пример
body {
background-image: url («bgdesert.jpg»);
}
Примечание: При использовании фонового изображения используйте изображение, которое не нарушает текст.
Фоновое изображение — повторение по горизонтали или вертикали
По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.
Некоторые изображения следует повторять только по горизонтали или вертикали, иначе они будут выглядеть странно, например:
Пример
кузов
{
background-image: url («gradient_bg.png»);
}
Пример
body {
background-image: url («gradient_bg.png «);
background-repeat: repeat-x;
}
Совет: Чтобы повторить изображение по вертикали, установите background-repeat: repeat-y;
Фоновое изображение — Установить положение и не повторять
Отображение фонового изображения только один раз также определяется свойством background-repeat
:
Пример
body {
background-image: url («img_tree.png «);
background-repeat: no-repeat;
}
В приведенном выше примере фоновое изображение отображается в том же месте, что и текст. Мы хотим изменить положение изображения, чтобы оно не слишком мешало тексту.
Положение изображения определяется свойством background-position
:
Пример
кузов
{
background-image: url («img_tree.png «);
background-repeat: no-repeat;
background-position: right top;
}
Фоновое изображение — фиксированная позиция
Чтобы указать, что фоновое изображение должно быть исправлено (не будет прокручиваться вместе с остальной страницей), используйте свойство background-attachment
:
Пример
кузов
{
background-image: url («img_tree.png «);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Справочная информация — Сокращенная собственность
Чтобы сократить код, также можно указать все свойства фона в одном единственном свойстве. Это называется сокращенным свойством.
Сокращенное свойство фона — фон
:
Пример
body {
background: #ffffff url («img_tree.png «) без повтора справа вверху;
}
При использовании сокращенного свойства порядок значений свойств следующий:
-
цвет фона
-
фоновое изображение
-
фоновый повтор
-
фон-приставка
-
фон-позиция
Не имеет значения, отсутствует ли одно из значений свойства, если другие находятся в этом порядке.