Установить цвет фона div только с html
Содержание:
- Как в html сделать фон в виде цвета или картинки?
- Изменяем цвет фона с помощью атрибута BGCOLOR.
- background-image
- Как выбрать цвет правильно?
- Свойство CSS background-repeat
- Свойство CSS background-size
- Фиксированный задний фон
- Выбор картинки
- Градиент цвета фона HTML
- Полупрозрачный фон
- Управление позицией фонового изображения
- Шестнадцатеричные обозначения
- Позиционирование фонового изображения
- Свойство CSS background-image
- Метод 1: как изменить цвет текста HTML с помощью CSS
- Повтор фонового изображения
- Тип 2 – Корпоративные сайты и сервисы
- Выбор акцентных цветов
- Изменяем фон на сайтах Ucoz
- background-size
- Свойство CSS background-position
- Как использовать программу для подбора акцентных цветов
- Несколько фоновых изображений
- Метод RGB
- розовым цветомВыберите цвет в окне, как показано на рисунке, приведенном ниже. Обратите внимание на соответствующие значения Red-Green-Blue, указанные в правом нижнем углу окна. Введите эти значения в том же порядке в CSS.
Как в html сделать фон в виде цвета или картинки?
Вы можете задавать фон блока или всей страницы с использованием различных вариантов:
- при помощи цвета,
- использовать изображение,
- градиентный фон,
- использовать сразу несколько вариантов (например, картинка + цвет или несколько картинок сразу).
Введу того что HTML не особо предназначен для визуального оформления страницы, в с помощью HTML можно сделать только фон в виде цвета или изображения. Для использования остальных вариантов создания фона нам не обойтись без помощи CSS. Но обо всём по порядку.
Чтобы в html сделать фон нам понадобится атрибуты bgcolor и background.
Для того чтобы в HTML сделать фон в виде цвета нужно к тегу для которого нам нужно задать фон дописать атрибут bgcolor
PHP
<table bgcolor=»#сссссс»>
| 1 | <table bgcolor=»#сссссс»> |
Чтобы сделать фон в виде изображения используем background и в кавычках указываем путь к файлу с картинкой.
PHP
<table background=»images/bg.jpg»>
| 1 | <table background=»images/bg.jpg»> |
Обращаю ваше внимание, что в современных браузерах такой способ задания фона срабатывает не для всех тегов. Кроме того он очень неудобный и по моему мнению он уже себя изжил и использовать его не стоит
Лучше и эффективнее воспользоваться CSS.
Изменяем цвет фона с помощью атрибута BGCOLOR.
При помощи атрибута BGCOLOR, который тоже размещается в теге <body>, можно задать цвет фона HTML страницы.
Цвет задается в виде цифрового кода:
<body bgcolor=»#000000″>
или обычным названием цвета:
<body bgcolor=»green»>
Вот пример:
<html> <head> <title>Изменяем цвет фона с помощью атрибута BGCOLOR</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body bgcolor="#000000" text="green"> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Результат:
Или вот так:
<html> <head> <title>Заголовок страницы</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body bgcolor="green" text="#000000"> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Результат:
background-image
С помощью этого свойства в качестве фона для сайта можно поставить изображение. Указывая значения других свойств, можно изменять его размер, определять место на странице и повторять как в горизонтальном, так и в вертикальном направлении. Указателем на рисунок в таблице является путь к файлу-изображению, который записывается с помощью конструкции url. Следует помнить, что тег img, в отличие от свойства image, является частью языка html.
See the Pen
background-image by Андрей (@adlibi)
on CodePen.
Если для элемента установлено значение цвета фона, то он будет виден до окончания загрузки картинки, а также сквозь ее прозрачные участки.
Как выбрать цвет правильно?
Крупные компании не случайно выбирают те или иные цветовые схемы для сайта. Это осознанный выбор, являющийся частью брендинга и маркетинга.
Каждый цвет привлекает свою группу покупателей, и даже может повлиять на их выбор:
Красно-оранжевый, черный и ярко-синий привлекают импульсивных покупателей. Такие цветовые решения зачастую можно встретить в сетях быстрого питания, магазинах одежды и на дешевых распродажах.
Тёмно-синий и бирюзовый привлекают покупателей с ограниченной суммой денег. Эти цвета можно встретить в банках и больших универмагах.
Малиновый, лазурный и розовый привлекают классических покупателей. Распространены в магазинах одежды.
Чтобы привлечь нужных вам покупателей, используйте комбинации различных цветов.
Мы специально создали наглядную инфографику подбора цветовых схем, чтобы вам было проще выбрать преобладающий цвет для вашего бренда:
Свойство CSS background-repeat
Это свойство определяет нужно ли повторять фоновое изображение (если, конечно, оно задано) и как это делать.
В качестве значений принимает следующие ключевые слова:
- — наследуется значение родительского элемента
- — картинка повторяется как по вертикали, так и по горизонтали
- — картинка повторяется по горизонтали
- — картинка повторяется по вертикали
- — картинка выводится один раз и не повторяется
- — картинка повторяется по горизонтали и вертикали, не обрезается, при этом если между картинками есть свободное место, недостаточное, чтобы вместить целую, они равномерно распределяются
-
— картинка повторяется по вертикали и горизонтали, не обрезается, при этом если между картинками есть свободное место, недостаточное, чтобы вместить целую, они растягиваются или сжимаются
Последние два значения проще понять на следующем примере. Попробуйте изменить размеры синего и оранжевого блоков.
Свойство CSS background-size
Свойство определяет размер (масштаб) фонового изображения или градиента. В качестве значений можно использовать либо ключевые слова ((дефолтное значение), , ), либо относительные (%) или абсолютные (px) величины.
Если используются ключевые слова:
- означает, что фоновая картинка должна покрывать всю площадь элемента, даже если для этого ее нужно растянуть или обрезать по одному краю.
- означает, что фоновая картинка должна полностью поместиться в размеры элемента, даже если часть его площади будет не покрыта ей.
- означает, что размер изображения будет рассчитан браузером в зависимости от его размера и соотношения сторон.
Фиксированный задний фон
Когда вы прокручиваете содержимое страницы фоновое изображение, как правило, прокручивается вместе с содержимым. Это значение используется по умолчанию и подходит для большинства задач, но средствами 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 Пример фиксированного фонового изображения.
Выбор картинки
Начать мне бы хотелось с выбора изображения. Чтобы на страничке фон вы выглядел более ровным и красивым, а вам не пришлось заморачиваться с размерами и выравниванием. Предлагаю сразу искать бесшовные текстуры. Что это такое?
К сожалению, растянуть изображение в html на весь экран невозможно. Фото используется в натуральную величину. Если картинка маленькая, то она замостит всю площадь, как на скриншоте внизу. Чтобы растянуть картинку придется создать дополнительный css документ, без этого не получится.
Хотя, у вас есть возможность обойти систему. Для этого используйте фотошоп и измените размер картинки до ширины экрана (1280х720). Хотя в этом случае при скроллинге вниз, она картинка будет сменять другую.
Намного лучшим вариантом, если вы не хотите использовать css, будет использование бесшовных текстур. У них никаких стыков не видно. Они, как обои или современная плитка в дизайне. Один сменяет другой и никаких стыков не видно.
Если вас интересуют бесплатные изображения и отсутствие юридических последствий за их использование, то я рекомендую поискать на сайте Pixabay.com.
Градиент цвета фона HTML
Для еще большего количества вариантов стиля вы можете создать градиентный фон. Это особый тип изображения, на котором чаще всего один цвет постепенно меняется на другой в определенном направлении, например сверху вниз, слева направо или по диагонали.
Они известны как линейные градиенты. Чтобы создать линейный градиент, вы должны указать как минимум две точки цвета. Давайте посмотрим на четыре примера ниже.
Линейный градиент – сверху вниз
Допустим, вы хотите изменить цвет фона с белого в верхней части экрана на синий внизу. Используя селектор CSS тела, вы примените уникальные свойства стиля к телу веб-страницы. Вместо свойства background-color вы будете использовать свойство background-image (или сокращенное обозначение «background»). Затем вы установите для свойства значение «linear-gradient» и укажите две точки цвета в круглых скобках. Вот синтаксис:
Это еще не все для CSS. Чтобы изображение занимало весь экран, вы хотите установить высоту элемента html на 100%.
Все вместе вот CSS:
Вот HTML (включая теги тела):
Вот результат:
Линейный градиент – слева направо
Обратите внимание, что для линейного градиента выше не было указано направление. Это потому, что направление сверху вниз – это направление по умолчанию
Если вы хотите указать другое направление, вы добавите его в скобки до того, как цвет прекратится.
Вот CSS для примера выше, переписанный так, что градиент слева направо.
Вот HTML:
Вот результат:
Линейный градиент – угол 45 градусов
Если бы я хотел, чтобы градиент шел по диагонали, я мог бы использовать ключевые слова «вниз вправо», «влево вниз», «вверх вправо» или «влево вверху». Если вам нужен больший контроль над направлением градиента, вы можете использовать углы, а не ключевые слова.
Обратите внимание, что значение 0 градусов эквивалентно ключевому слову «вверх», 90 градусов эквивалентно «вправо», а 180 градусов эквивалентно «вниз». Если бы я хотел, например, чтобы градиент шел вверх и вправо, я мог бы установить направление на 45 градусов
Вот CSS:
Если бы я хотел, например, чтобы градиент шел вверх и вправо, я мог бы установить направление на 45 градусов. Вот CSS:
Вот HTML:
Вот результат:
Линейный градиент – несколько цветовых точек
Чтобы создать линейный градиент, вам понадобится как минимум две цветовые точки. Но максимума нет, а это значит, что вы можете использовать столько, сколько захотите. Ниже приведен пример с четырьмя цветовыми ограничителями.
Вот CSS:
Вот HTML:
Вот результат:
Полупрозрачный фон
Формат RGBA позволяет задать цвет фона элемента полупрозрачным, тогда сквозь него будет проступать фон веб-страницы. Более заметно и эффектно это выглядит, когда у нас имеется фоновая картинка или узор, а не однотонный цвет. Тогда сквозь фон будет проступать рисунок, но при этом сохранится читаемость текста (рис. 2).
Рис. 2. Полупрозрачный фон
В примере 2 показано использование формата RGBA для создания такого фона.
Пример 2. Формат RGBA
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Фон</title>
<style>
body {
background: url(/example/image/aquaria.jpg); /* Фоновая картинка */
background-size: cover; /* Растягиваем фон */
}
.block {
background: rgba(0,0,0,0.6); /* Полупрозрачный фон */
color: #fff; /* Цвет текста */
padding: 20px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class=»block»>
<h1>Подводный мир</h1>
<p>В глубинах морей и океанов, существует свой, не сравнимый ни с чем ,
удивительный, и не похожий на тот, что окружает нас с вами подводный мир.</p>
</div>
</body>
</html>
Управление позицией фонового изображения
По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием единиц измерения CSS, либо используя ключевые слова:
| Значение | Описание |
|---|---|
| left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom | Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center» |
| x% y% | Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%. |
| x y | Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения. |
Рассмотрим пример использования этого свойства:
<!DOCTYPE html>
<html>
<head>
<title>Пример позиционирования фонового изображения</title>
<style>
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
<body>
<div class = "leftTop">left top</div>
<div class = "leftCenter">left center</div>
<div class = "leftBottom">left bottom</div>
<div class = "rightTop">right top</div>
<div class = "rightCenter">right center</div>
<div class = "rightBottom">right bottom</div>
<div class = "centerTop">center top</div>
<div class = "centerCenter">center center</div>
<div class = "centerBottom">center bottom</div>
<div class = "userPosition">20px 75%</div>
</body>
</html>
В данном примере, мы создали 10 блоков с различными классами, в которых заданы различные значения, связанные с позиционированием фоновых изображений. Для первых девяти блоков были использованы всевозможные ключевые слова, а для последнего блока было задано значение для горизонтального позиционирования в пикселях, а для вертикального в процентах.
Результат нашего примера:
Рис. 117 Пример позиционирования фонового изображения.
Шестнадцатеричные обозначения
Шестнадцать цветов — это мало, если учесть, что большинство мониторов могут отображать шестнадцать миллионов цветов. Но представьте, если бы нужно было задать название каждому из шестнадцати миллионов оттенков …
К счастью, в CSS предусмотрено несколько способов выбора цвета. Первый способ — шестнадцатеричное значение. Вот как выглядит название цвета в шестнадцатеричном формате: #FF5A28. Это комбинация букв и цифр, которые указывают цвет.
Всегда нужно начинать с указания символа хэша (#), за которым следует шесть букв или цифр от до 9 и от A до F.
Эти буквы или цифры работают парами. Первые две цифры указывают количество красного, две следующие — зеленого, а две последние — голубого. Смешивая эти значения (которые являются компонентами Red-Green-Blue в цвете), можно получить любой цвет.
Таким образом, #000000 соответствует черному цвету, а #FFFFFF — белому.
Некоторые графические программы, такие как Photoshop, Gimp и Paint.NET, позволяют указывать цвета в шестнадцатеричном формате.
Вот, например, как можно применить белый цвет, указанный в шестнадцатеричном формате, к абзацам:
p
{
color: #FFFFFF;
}
При этом допускается сокращенная запись: можно указать цвет с помощью только трех символов. Например: #FA3 эквивалентно #FFAA33.
Позиционирование фонового изображения
По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (background-repeat: no-repeat;) или должно повторяться с определенного места, то можно использовать свойство background-position, чтобы указать в каком месте окна браузера или элемента оно должно быть размещено. Это свойство обычно принимает два значения, разделяемые пробелом. Первое значение — положение по горизонтали, второе — по вертикали.
Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
body {
background-image: url('img_flwr.png');
background-repeat: no-repeat;
background-position: bottom right;
padding-right: 230px; /*отступ от правого края равный ширине картинки*/
}
Попробовать »
Если будет указано только одно значение, то по умолчанию вторым значением будет center:
background-position: right;
это то же самое что и:
background-position: right center;
Вы также можете использовать в качестве значений пиксели или проценты. Они определяют расстояние от верхнего левого угла окна браузера (или элемента-контейнера). Верхний левый угол соответствует значению 0% 0%.
Свойство CSS background-image
Это свойство используется для того, чтобы задать в качестве фона изображение (.png, .jpg, .gif, .svg) или градиент (по сути также являющийся изображением, которое генерирует браузер).
В качестве значения указывается путь к файлу изображения или data URI (изображение, закодированное в base64). Кавычки можно использовать как одинарные, так и двойные, а можно и вообще не использовать. В данном случае это дело вкуса.
Для того, чтобы задать в качестве фонового изображения градиент (постепенный переход от одного цвета к другому) используются CSS-функции и .
создает переход между цветами как бы вдоль прямой линии (например, слева направо, сверху вниз, из левого нижнего угла в правый верхний и т.д.).
создает переход от центра к периферии.
Метод 1: как изменить цвет текста HTML с помощью CSS
- Откройте HTML-файл. Лучший способ изменить цвет текста – это воспользоваться CSS. Тег <font> не поддерживается в HTML5. Поэтому воспользуйтесь CSS, чтобы определить стиль элементов страницы.
- Этот метод также работает с внешними таблицами стилей (отдельными файлами CSS). Приведенные ниже примеры предназначены для HTML-файла с внутренней таблицей стилей:
Поместите курсор внутри тега
. Стили определяются внутри этого тега, если используется внутренняя таблица стилей:
Введите
<!DOCTYPE html> <html> <head> <style> </style> </head>
Введите элемент, цвет текста которого нужно изменить. Используйте раздел
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<style>
body {
color:
}
</style>
</head>
Введите цвет текста. Это можно сделать тремя способами: ввести название, шестнадцатеричное значение или значение RGB. Например, чтобы сделать текст синим, введите blue, rgb(0, 0, 255) или #0000FF:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
</style>
</head>
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: red;
}
h1 {
color: #00FF00;
}
p {
color: rgb(0,0,255)
}
</style>
</head>
<body>
<h1>Этот заголовок будет зеленым.</h1>
<p>Этот параграф будет синим.</p>
Этот основной текст будет красным.
</body>
</html>
Укажите стилевой класс CSS вместо того, чтобы менять элемент. Перед тем, как сделать цвет фона в HTML или изменить стиль элемента, можно указать стилевой класс, а затем применить его к любому элементу страницы. Например, класс .redtext окрасит текст элемента в красный цвет:
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
color: red;
}
</style>
</head>
<body>
<h1 class="redtext">Этот заголовок будет красным</h1>
<p>Этот параграф будет стандартным.</p>
<p class="redtext">Этот параграф будет красным</p>
</body>
</html>
Повтор фонового изображения
По умолчанию фоновое изображение повторяется по вертикали и по горизонтали заполняя таким образом все доступное пространство в элементе. Повтор фонового изображения можно переопределить с помощью свойства background-repeat, рассмотрим его возможные значения:
- no-repeat — фоновое изображение не повторяется
- repeat-x — повторяет фоновое изображение только по горизонтали
- repeat-y — повторяет фоновое изображение по вертикали
- repeat — фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
body {
background-image: url('img_tree.png');
background-repeat: no-repeat;
padding-left: 200px; /*отступ от левого края равный ширине картинки*/
}
</style>
</head>
<body>
<h1>Украсим страничку фоновым изображением!</h1>
<p>При добавлении изображения к фону элемента, текст может наехать на него, что может
испортить впечатление от страницы. Для того, чтобы этого не случилось, для всех
элементов был добавлен отступ от левого края, равный ширине картинки.</p>
</body>
</html>
Попробовать »
Тип 2 – Корпоративные сайты и сервисы
При создании корпоративного ресурса преследуется одна цель – продвижение товаров или услуг.
В зависимости от того, какова цель вашего сайта, фоновый цвет должен отличаться.
Продвижение бренда
Если вы хотите создать запоминающийся образ компании, используйте для фона различные оттенки преобладающего цвета или цвета бренда.
Все потому, что цвет напрямую влияет на узнаваемость бренда (помните пример про Кока-Колу?) Когда вы используете различные оттенки цвета своего бренда в качестве фона, вы усиливаете его и делаете более запоминающимся для клиентов.
Если преобладающий цвет вашего сайта вызывающий, то его использование в качестве фона может негативно повлиять на восприятие пользователей. В таких случаях, используйте оттенки с наименьшей интенсивностью:
Продвижение сервиса
Если вашей целью является привлечение внимания к сервису или к портфолио с вашими работами, используйте белый или нейтральный цвет фона.
Как и в случае с информационными ресурсами, не нужно перегружать сайт и отвлекать внимание пользователей от контента, который вы хотите донести. Добавив белый или светлый фон в цветовые схемы для сайта, вы заострите внимание на контенте:
Выбор акцентных цветов
Чтобы ваш дизайн был более интересным и профессиональным, нужно использовать акцентные готовые цветовые схемы для сайта. Ими можно выделять стоящие внимания части вашего сайта: цитаты, кнопки или подзаголовки.
Многие боятся использовать сразу несколько цветов, потому что не всегда интуитивно понятно, хорошо ли они сочетаются. Люди думают, что для того, чтобы научиться их сочетать, надо не только досконально изучить теорию цвета, но и наделать множество ошибок.
Существует более легкий путь, доступный каждому. Это программа по подбору цветов, которая поможет подобрать цветовые схемы точно так же, как это делают профессионалы!
Изменяем фон на сайтах Ucoz
Сегодня всё ещё есть вебмастеры, предпочитающие бесплатные хостинги, вроде Ucoz. И специально для них мы приводим инструкцию по изменению фона. Для того чтобы изменить фон сайта на Ucoz, необходимо перейти в панель управления, зайти в «Управление дизайном», а потом в «Редактирование шаблонов».
Теперь необходимо открыть таблицу стилей (CSS), найти строчку «body» и параметр «background». После этого нужно скопировать ссылку и вставить ее в адресную строку браузера. Таким образом вы получите доступ к картинке, которая была фоном.
Для использования нового фона, необходимо просто загрузить его в файловый менеджер. При этом проследите, чтобы название новой картинки для фона совпадало с тем, которое было до внесения изменений. Сохраните проделанную работу и проверьте результаты своих трудов.
background-size
С помощью свойства можно осуществить изменение величины фоновой картинки, то есть использовать ее масштабирование. Размер можно изменять используя любые единицы, которые допустимы в таблицах CSS – проценты, пиксели, em (величина применяемого в блоке шрифта).
При этом значение пропорционально увеличивает рисунок до ближайших размеров – ширины или высоты, – позволяет полностью заполнить блок, также сохраняя соотношение ширины и высоты.
Значение по умолчанию – .
На примере мы взяли квадрат размером 200×200 и фоновую картинку меньшим размером – 100×100, которой заполнили заполнили всю область фона с помощью .
See the Pen
background-size by Андрей (@adlibi)
on CodePen.
Свойство CSS background-position
При помощи этого свойства в CSS можно задавать положение фонового изображения или градиента относительно границ элемента.
Значения могут быть либо абсолютными (px, em или другие единицы), либо относительными (%). При этом сначала указывается значение по горизонтали, а потом по вертикали.
Если с абсолютными значениями все просто (так сказать, как слышится, так и пишется), то с относительными немного сложнее. Значение означает, что точка, находящаяся на 10% правее левого края изображения будет находиться на 10% правее левого края элемента, а точка, находящаяся на 20% ниже верхнего края изображения будет находиться на 20% ниже верхнего края элемента.
Кроме того, в качестве значений можно использовать ключевые слова (, , , , ). В этом случае порядок не имеет значения.
Дефолтное значение — 0 0, т.е. изображение находится в левом верхнем углу элемента.
Как использовать программу для подбора акцентных цветов
Как только вы определились с преобладающим цветом, нет ничего проще, чем подобрать акцентные цвета с помощью таких программ, как Adobe Color CC Tool:
Вот короткая инструкция, которая покажет вам, как создать цветовую схему одним из двух способов:
На основе преобладающего цвета
Шаг 1. Для начала узнайте код вашего преобладающего цвета. Например, на сайте ColorPicker.com. Код цвета указан в прямоугольнике прямо над квадратом с цветовой палитрой.
Скопировав код с ColorPicker.com, вставьте его в поле «НЕХ» инструмента Adobe Color. Убедитесь, что вы вставили код в колонку посередине:
Вставьте код преобладающего цвета вашего сайта в прямоугольник ПОСЕРЕДИНЕ.
Как только вы зададите цвет, Adobe Color отобразит его на экране вместе с другими комплементарными цветами.
Шаг 2. В левой верхней стороне вы увидите прямоугольник со следующими цветовыми схемами:
- Последовательная;
- Монохромная;
- Треугольная;
- Комплементарная;
- Составная;
- Оттенки.
Выберите цветовую схему
Поэкспериментируйте с разными цветовыми схемами, чтобы понять, какая из них подходит именно вам. Все цвета, предложенные программой, хорошо сочетаются друг с другом.
Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета.
Важно не перемещать короткий указатель, расположенный посередине, чтобы ваш преобладающий цвет оставался постоянным:
Перемещайте указатели, если хотите выбрать другие комплементарные цвета.
CMS и конструкторы сайтов позволяют вставить цветовые коды (HEX) для выделения любой части вашего сайта:
Скопируйте цветовые коды (HEX) для вашей цветовой схемы для сайта.
На основе понравившейся фотографии
Порой проще искать цветовые решения на просторах интернета и вдохновляться ими.
Вы можете загрузить любую понравившуюся фотографию в Adobe Color и программа автоматически сгенерирует цветовую схему, созданную на ее основе.
Шаг 1. Загрузите фотографию:
Нажмите на значок камеры, чтобы загрузить изображение.
Шаг 2. Выберите одно из пяти цветовых настроений:
- Красочное;
- Яркое;
- Приглушенное;
- Насыщенное;
- Темное.
Поэкспериментируйте с цветовыми настроениями, чтобы понять, какое вам ближе:
Выберите цветовое настроение.
Шаг 3. Сделайте цветовую схему еще продуманнее, перемещая один из указателей цвета по изображению:
Перемещайте указатели, если хотите выбрать другие комплементарные цвета.
Шаг 4. Предложенная цветовая палитра расположена под изображением. Вот как можно подобрать цветовую схему для вашего веб-дизайна.
Чтобы увидеть коды (HEX) цветов, нажмите на цветное колесико, расположенное в правом верхнем углу:
Нажмите на цветное колесико, чтобы увидеть коды цветов:
Скопируйте цветовые коды (HEX) для вашей цветовой схемы.
Несколько фоновых изображений
С помощью свойства background можно добавить несколько фоновых изображений к одному элементу. Для этого в качестве значения нужно указать список картинок, разделяя их запятой. Как и в случае с одной картинкой, к каждому фоновому изображению можно будет добавить дополнительные значения:
div {
height: 360px;
width: 400px;
border: 3px solid #333;
background: url('../img_flwr.gif') bottom right no-repeat,
url('../img_tree.gif') repeat-x;
}
Попробовать »
Добавление нескольких фоновых изображений поддерживается во всех новых версиях браузеров, включая IE9, однако следует учитывать, что в старых версиях браузеров, которые не поддерживают несколько фонов, правило для фона будет проигнорировано целиком.
Стоит отметить, что порядок указания картинок имеет важное значение. Первое добавляемое изображение будет отображаться над всеми остальными, последнее под всеми остальными фоновыми изображениями
Мы можем увидеть как это работает, если первым фоновым изображением задать картинку, которая не имеет прозрачных областей, в этом случае она будет перекрывать все остальные картинки, заданные для фона:
div {
height: 360px;
width: 400px;
border: 3px solid #333;
background: url('../image.png'),
url('../img_flwr.gif') bottom right no-repeat,
url('../img_tree.gif') repeat-x;
}
Попробовать »
Если переставить наши картинки местами, сделав первую последней в списке, то она будет отображаться под всеми остальными изображениями, задавая основной фон для элемента:
div {
height: 360px;
width: 400px;
border: 3px solid #333;
background: url('../img_flwr.gif') bottom right no-repeat,
url('../img_tree.gif') repeat-x,
url('../image.png');
}
Попробовать »
Метод RGB
Red-Green-Blue, сокращенно обозначаемый как «RGB». Как и в шестнадцатеричном коде, чтобы выбрать цвет, необходимо определить количество красного, зеленого и синего.
Это намного практичнее, и с помощью простой программы для рисования, такой как Paint, можно найти нужный цвет. Вот действия, которые необходимо выполнить:
Зайдите в меню «Пуск», найдите в нем программу Paint и запустите ее.
Перейдите в раздел «Редактировать цвета», как показано на рисунке, приведенном ниже.
Откроется окно. В поле справа переместите ползунки, чтобы выбрать нужный цвет. Предположим, нужно вывести заголовки
розовым цветомВыберите цвет в окне, как показано на рисунке, приведенном ниже.
Обратите внимание на соответствующие значения Red-Green-Blue, указанные в правом нижнем углу окна. Введите эти значения в том же порядке в CSS.
p
{
color: rgb(240,96,204);
}
Изменение цвета в Paint
Выбор цвета в Paint
Чтобы использовать метод RGB, нужно ввести rgb (Red, Green, Blue), заменив «Red, Green, Blue» соответствующими числами в диапазоне от до 255.
Заключение и итоги
Не стоит руководствоваться персональными пристрастиями или чутьем выбирая цветовые схемы для сайта.
Используйте цвета, которые нравятся вашей потенциальной аудитории, и тогда ресурс надолго засядет у людей в памяти. Это выделит вас среди конкурентов.
Выбор цветовой палитры ни в коем случае не должен быть случайным. Это набор действий, которые необходимо предпринять:
- Выбрать для сайта правильный преобладающий цвет;
- Выбрать для преобладающего цвета правильные вспомогательные цвета;
- Выбрать соответствующий фоновый цвет.
Следуя трем рекомендациям, описанным выше, вы сможете создать достойные цветовые схемы для сайта, даже не являясь профессионалом в дизайне.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, подписки, лайки, дизлайки, отклики!
ОКОльга Кириченкоавтор статьи «How to Choose a Good Color Scheme For Your Website»
