Содержание
- 1 Изменяем цвет текста с помощью атрибута text.
- 2 Значение RGB
- 3 Скорректированные расчеты
- 4 Установка цвета фона и фонового рисунка
- 5 Свойство background-repeat устанавливает повторение фона
- 6 CSS Справочники
- 7 CSS Свойства
- 8 Как установить цвет страницы HTML
- 9 RGBA
- 10 HSL
- 11 RGB цвета
- 12 CSS и наследование
- 13 background | htmlbook.ru
- 14 Значение RGB
- 15 Универсальное свойство background
Изменяем цвет текста с помощью атрибута text.
Атрибут text прописывается в теге <body>. Цвет задается в виде цифрового кода:
<body text=»#cc0000″>
или обычным названием цвета:
<body text=»green»>
Код кодировки и название цвета для HTML вы посмотрите тут.
Вот пример:
<html> <head> <title>Изменяем цвет текста с помощью атрибута text</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body text="#cc0000"> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Результат:
Или вот так:
<html> <head> <title>Изменяем цвет текста с помощью атрибута text</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body text="green"> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Результат:
Значение RGB
В HTML, цвет может быть указан как RGB значение, используя эту формулу:
RGB (красный, зеленый, синий)
Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета между 0 и 255.
Например, RGB (255, 0, 0) отображается красным цветом, так как красный цвет устанавливается в его наивысшее значение (255), а остальные устанавливаются в 0.
Для отображения черного цвета, все параметры цвета должны быть установлены в 0, как это: RGB (0, 0, 0).
Для отображения белого цвета, все параметры цвета должны быть установлены в 255, как это: RGB (255, 255, 255).
Экспериментируйте, смешивая значения RGB ниже:
Красный
255
Зеленый
Синий
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
Оттенки серого часто определяются с использованием одинаковых значений для всех 3 источников света:
Скорректированные расчеты
Первое очевидное последствие использование подхода с коррекцией яркости заключается в том, что мы не можем использовать формат HSL, так как CSS не может конвертировать его в RGB самостоятельно.
Поэтому придется перейти на RGB-формат для фона, вычислить параметр luma с помощью любого метода и использовать его в объявлении цвета (которое останется в HSL-формате).
:root {
/* цвет темы в RGB формате */
—red: 200;
—green: 60;
—blue: 255;
/* граничное значение для «светлых» цветов
рекомендуется 0.5 — 0.6 */
—threshold: 0.5;
/* граничное значение для отображения рамки
рекомендуется 0.8+ */
—border-threshold: 0.8;
}
.btn {
/* фон для основного класса */
background: rgb(var(—red), var(—green), var(—blue));
/* расчет воспринимаемой яркости по методу sRGB Luma
Luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255 */
—r: calc(var(—red) * 0.2126);
—g: calc(var(—green) * 0.7152);
—b: calc(var(—blue) * 0.0722);
—sum: calc(var(—r) + var(—g) + var(—b));
—perceived-lightness: calc(var(—sum) / 255);
/* черный или белый цвет */
color: hsl(0, 0%, calc((var(—perceived-lightness) — var(—threshold)) * -10000000%));
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
root{ /* цвет темы в RGB формате */ —red200; —green60; —blue255; /* граничное значение для «светлых» цветов рекомендуется 0.5 — 0.6 */ —threshold0.5; /* граничное значение для отображения рамки рекомендуется 0.8+ */ —border-threshold0.8; } .btn{ /* фон для основного класса */ backgroundrgb(var(—red),var(—green),var(—blue)); /* расчет воспринимаемой яркости по методу sRGB Luma Luma = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255 */ —rcalc(var(—red)*0.2126); —gcalc(var(—green)*0.7152); —bcalc(var(—blue)*0.0722); —sumcalc(var(—r)+var(—g)+var(—b)); —perceived-lightnesscalc(var(—sum)255); /* черный или белый цвет */ colorhsl(,%,calc((var(—perceived-lightness)-var(—threshold))*-10000000%)); } |
Для рамок нужно использовать RGBA и с помощью альфа-канала установить прозрачность. Более темный оттенок получается вычитанием 50 из каждого канала.
В WebKit на iOS есть странная ошибка: если в кратком объявлении свойства в формате RGBA использовать переменные, рамка отображается черной. Чтобы этого избежать, нужно использовать развернутое объявление.
.btn {
/* (…) */
/* темная рамка, если светлота больше, чем граничное значение */
—border-alpha: calc((var(—perceived-lightness) — var(—border-threshold)) * 100);
border-width: .2em;
border-style: solid;
border-color: rgba(calc(var(—red) — 50), calc(var(—green) — 50), calc(var(—blue) — 50), var(—border-alpha));
}
1 2 3 4 5 6 7 8 9 |
.btn{ /* (…) */ /* темная рамка, если светлота больше, чем граничное значение */ —border-alphacalc((var(—perceived-lightness)-var(—border-threshold))*100); border-width.2em; border-stylesolid; border-colorrgba(calc(var(—red)-50),calc(var(—green)-50),calc(var(—blue)-50),var(—border-alpha)); } |
Так как мы больше не используем HSL для фона, то для получение дополнительного цвета воспользуемся фильтром:
.btn—secondary {
filter: hue-rotate(60deg);
}
1 2 3 |
.btn—secondary{ filterhue-rotate(60deg); } |
Это не самый лучший подход. Помимо потенциальных проблем с дочерними элементами это означает, что переключение черного и белого цвета и видимость рамки на дополнительном элементе будет зависеть от оттенка основного элемента, а не от его собственного. Но реализация JavaScript имеет ту же проблему, поэтому это достаточно близкое решение.
И вот окончательный вариант:
See the Pen CSS Automatic WCAG contrast font-color depending on element background by Facundo Corradini (@facundocorradini) on CodePen.
Решение на чистом CSS позволяет добиться того же эффекта, что и JavaScript, но при этом требует меньшего объема кода.
Установка цвета фона и фонового рисунка
Цвет фона определяется значением свойства background-color,
а изображение, которое используется в качестве фона, задается свойством background-image.
Значением по умолчанию для цвета фона является transparent,
которое устанавливает прозрачный фон. Для установки фонового рисунка используется
абсолютный или относительный адрес к файлу. Рекомендуется задавать одновременно
фоновый рисунок и цвет фона, который будет использоваться в случае недоступности
файла изображения.
Пример 4. Цвет фона и фоновое изображение
Если задано фоновое изображение, то свойство background-repeat
определяет его повторяемость и способ, как это делать. Допустимыми значениями
являются repeat (повторяемость по вертикали и горизонтали),
repeat-x (по горизонтали), repeat-y
(по вертикали) и no-repeat (только один рисунок,
без повторения), как показано в примере 5.
Пример 5. Повторяемость фонового рисунка
В данном примере фоновый рисунок повторяется по горизонтали.
Положение фона определяется свойством background-position.
У него два значения, положение по горизонтали (может быть — right,
left, center) и вертикали
(может быть — top, bottom,
center). Положение можно, также, задавать в процентах,
пикселах или других абсолютных единицах (пример 6).
Пример 6. Положение фона
В данном примере фон будет помещен в правый нижний угол страницы. Если нужно
определить рисунок в левом верхнем углу, то надо задать следующий вид: background-position:
left top.
Свойство background-attachment: fixed фиксирует
фон, чтобы он оставался неподвижным при прокрутке содержимого окна браузера.
Свойство background-repeat устанавливает повторение фона
Устанавливает, как будет повторяться фон, установленный при помощи свойства . Повторение может быть по вертикали, по горизонтали или сразу в обе стороны. Допустимы перечисления через запятую, чтобы задать для нескольких изображений. Синтаксис:
Код CSS
Свойство принимает 6 значений:
- – Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не помещается. Это по умолчанию;
- – Фоновое изображение повторяется только по горизонтали;
- – Фоновое изображение повторяется только по вертикали;
- – Фоновое изображение не повторяется. Изображение будет показано только один раз;
- – Фоновое изображение повторяется в максимально возможной степени без отсечения. При необходимости добавляются свободные пространства между изображениями;
- – Фоновое изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без пропусков);
Рассмотрим пример:
Код CSS
CSS Справочники
CSS СправочникCSS ПоддержкаCSS СелекторыCSS ФункцииCSS ЗвукCSS Веб шрифтыCSS АнимацииCSS ДлиныCSS Конвертер px-emCSS Названия цветаCSS Значения цветаCSS по умолчаниюCSS Символы
CSS Свойства
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
@charset
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
width
word-break
word-spacing
word-wrap
writing-mode
z-index
Как установить цвет страницы HTML
Для того, чтобы изменить цветовой фон страницы применяется тег bgcolor=»#цвет».
Вместо слова цвет вставляются цвета HTML модели RGB, из 3 основных цветов — красный, зеленый,
синий. Каждый цвет состоит из 2 знаков от 0 до 9или букв от A до F.
Пример записи черного цвета — «#000000»,белого — «#FFFFFF»,красного — «#FF0000»,зеленого — «#33CC00»,желтого — «#FFFF00».
Что бы установить цвет фона всей страницы пишем : <body bgcolor=»#??????»> (порядок: красный/ зеленый/ синий).
Тег bgcolor также вставляется в тот тег, который вы хотите изменить.
Например <tr bgcolor=»#0000FF»> или <td bgcolor=»#58F786″>.
Можно сделать фоном картинку или фото <body background=»?»>
Чтобы изменить цвет текста на всей странице применяется параметр — text.
Его надо вставить в тег<body text=»#FF0000″>.
Если вам надо изменить цвет определенного участка текста надо применить тег <font> </font>.
Запись этого будет такая<font color=»#FF0000″> текст </font>.
Если вы хотите изменить цвет гиперссылок, то этот параметр
записывается так: <body link=»#FF0000″>.Также вы можете задать цвет активной ссылки <body alink=»#цвет»>
и пройденной ссылки <body vlink=»#цвет»>
aliceblue | #F0F8FF |   |
antiquewhite | #FAEBD7 |   |
aquamarine | #7FFFD4 |   |
azure | #F0FFFF |   |
beige | #F5F5DC |   |
bisque | #FFE4C4 |   |
black | #000000 |   |
blanchedalmond | #FFEBCD |   |
blue | #0000FF |   |
blueviolet | #8A2BE2 |   |
brown | #A52A2A |   |
burlywood | #DEB887 |   |
cadetblue | #5F9EA0 |   |
chartreuse | #7FFF00 |   |
chocolate | #D2691E |   |
coral | #FF7F50 |   |
cornflowerblue | #6495ED |   |
cornsilk | #FFF8DC |   |
crimson | #DC143C |   |
cyan | #00FFFF |   |
darkblue | #00008B |   |
darkcyan | #008B8B |   |
darkgoldenrod | #B8860B |   |
darkgray | #A9A9A9 |   |
darkgreen | #006400 |   |
darkkhaki | #BDB76B |   |
darkmagenta | #8B008B |   |
darkolivegreen | #556B2F |   |
darkorange | #FF8C00 |   |
darkorchid | #9932CC |   |
darkred | #8B0000 |   |
darksalmon | #E9967A |   |
darkseagreen | #8FBC8F |   |
darkslateblue | #483D8B |   |
darkslategray | #2F4F4F |   |
darkturquoise | #00CED1 |   |
darkviolet | #9400D3 |   |
deeppink | #FF1493 |   |
deepskyblue | #00BFFF |   |
dimgray | #696969 |   |
dodgerblue | #1E90FF |   |
firebrick | #B22222 |   |
floralwhite | #FFFAF0 |   |
forestgreen | #228B22 |   |
fuchsia | #FF00FF |   |
gainsboro | #DCDCDC |   |
ghostwhite | #F8F8FF |   |
gold | #FFD700 |   |
goldenrod | #DAA520 |   |
gray | #808080 |   |
green | #008000 |   |
greenyellow | #ADFF2F |   |
honeydew | #F0FFF0 |   |
hotpink | #FF69B4 |   |
indianred | #CD5C5C |   |
indigo | #4B0082 |   |
ivory | #FFFFF0 |   |
khaki | #F0E68C |   |
lavender | #E6E6FA |   |
lavenderblush | #FFF0F5 |   |
lawngreen | #7CFC00 |   |
lemonchiffon | #FFFACD |   |
lightblue | #ADD8E6 |   |
lightcoral | #F08080 |   |
lightcyan | #E0FFFF |   |
lightgoldenrodyellow | #FAFAD2 |   |
lightgreen | #90EE90 |   |
lightgrey | #D3D3D3 |   |
lightpink | #FFB6C1 |   |
lightsalmon | #FFA07A |   |
lightseagreen | #20B2AA |   |
lightskyblue | #87CEFA |   |
lightslategray | #778899 |   |
lightsteelblue | #B0C4DE |   |
lightyellow | #FFFFE0 |   |
lime | #00FF00 |   |
limegreen | #32CD32 |   |
linen | #FAF0E6 |   |
magenta | #FF00FF |   |
maroon | #800000 |   |
mediumaquamarine | #66CDAA |   |
mediumblue | #0000CD |   |
mediumorchid | #BA55D3 |   |
mediumpurple | #9370DB |   |
mediumseagreen | #3CB371 |   |
mediumslateblue | #7B68EE |   |
mediumspringgreen | #00FA9A |   |
mediumturquoise | #48D1CC |   |
mediumvioletred | #C71585 |   |
midnightblue | #191970 |   |
mintcream | #F5FFFA |   |
mistyrose | #FFE4E1 |   |
moccasin | #FFE4B5 |   |
navajowhite | #FFDEAD |   |
navy | #000080 |   |
oldlace | #FDF5E6 |   |
olive | #808000 |   |
olivedrab | #6B8E23 |   |
orange | #FFA500 |   |
orangered | #FF4500 |   |
orchid | #DA70D6 |   |
palegoldenrod | #EEE8AA |   |
palegreen | #98FB98 |   |
paleturquoise | #AFEEEE |   |
palevioletred | #DB7093 |   |
papayawhip | #FFEFD5 |   |
peachpuff | #FFDAB9 |   |
peru | #CD853F |   |
pink | #FFC0CB |   |
plum | #DDA0DD |   |
powderblue | #B0E0E6 |   |
purple | #800080 |   |
red | #FF0000 |   |
rosybrown | #BC8F8F |   |
royalblue | #4169E1 |   |
saddlebrown | #8B4513 |   |
salmon | #FA8072 |   |
sandybrown | #F4A460 |   |
seagreen | #2E8B57 |   |
seashell | #FFF5EE |   |
sienna | #A0522D |   |
silver | #C0C0C0 |   |
skyblue | #87CEEB |   |
slateblue | #6A5ACD |   |
slategray | #708090 |   |
snow | #FFFAFA |   |
springgreen | #00FF7F |   |
steelblue | #4682B4 |   |
tan | #D2B48C |   |
teal | #008080 |   |
thistle | #D8BFD8 |   |
tomato | #FF6347 |   |
turquoise | #40E0D0 |   |
violet | #EE82EE |   |
wheat | #F5DEB3 |   |
white | #FFFFFF |   |
whitesmoke | #F5F5F5 |   |
yellow | #FFFF00 |   |
yellowgreen | #9ACD32 |   |
RGBA
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, определяющий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
В примере 1 показано изменение цвета фона и текста.
Пример 1. Цвет фона
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Фон</title>
<style>
body {
background-color: #fff1e4; /* Цвет фона веб-страницы */
color: #333; /* Цвет текста веб-страницы */
}
h1 {
color: rgb(231, 104, 93); /* Цвет текста заголовка */
}
</style>
</head>
<body>
<h1>Устойчивость</h1>
<p>Устойчивость по Ляпунову колебательно переворачивает устойчивый прибор.</p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Цветной фон
HSL
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
9.0+ | 1.0+ | 9.6+ | 3.1+ | 3.0+ | 2.1+ | 2.0+ |
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° — зелёному, а 240° — синему. Значение оттенка может изменяться от 0 до 359.
Рис. 1. Цветовой круг
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
RGB цвета
Значения цвета RGB поддерживается во всех основных браузерах. Значение цвета RGB задается в следующем порядке: R(красный), G(зеленый), B (синий). Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255 .
Например, значение rgb(0,255,0) отображается как зеленый, так как параметр зеленого установлен в максимальное точке (255), а красный и зелёный установлены в . Записывается это следующим образом:
<p style = color: rgb(0,255,0)">Я абзац зеленого цвета</p> <!-- задаем цвет текста значением rgb --> <p style = color: rgb(255,0,0)">Я абзац красного цвета</p> <!-- задаем цвет текста значением rgb --> <p style = color: rgb(255,165,0)">Я абзац оранжевого цвета</p> <!-- задаем цвет текста значением rgb -->
CSS и наследование
В CSS, если вы применяете стиль к тегу, все теги, которые находятся внутри него, будут иметь тот же стиль.
Если я применил черный цвет фона и белый цвет текста к тегу
<body>
, все заголовки и абзацы также будут иметь черный фон и белый текст… Это называется наследованием: теги, которые находятся внутри другого тега, «наследуют» его свойства.
Это также отображено в названии «CSS», что переводится как «Каскадные таблицы стилей». Свойства CSS наследуются в каскаде: если вы задаете стиль элементу, все его дочерние элементы будут иметь тот же стиль.
Это означает, что весь текст моей веб-страницы обязательно будет белым?
Нет, не обязательно. Если вы позже укажете, что хотите, чтобы заголовки были красными, этот стиль будет иметь приоритет, и заголовки станут красными.
Наследственность работает не только для цвета. Все свойства CSS наследуются. Например, можно назначить жирный шрифт в теге
<body>
, и все заголовки и абзацы будут отображаться жирным шрифтом.
Пример наследования с тегом
<mark>
Многие уверены, что они могут изменять только цвет фона html-страницы. Это не так: можно изменить фон любого элемента: заголовков, абзацев, определенных слов и т. д. В этом случае они будут выделены (как если бы они были отмечены маркером).
Например, существует тег
<mark>
, который используется для выделения определенных слов. Давайте используем его здесь:
<h1>Who turned off the lights?</h1> <p>Brr, it's all black on this website; it's a rather <mark>disturbing</mark> atmosphere don't you think?</p>
По умолчанию текст отображается на желтом фоне. Можно изменить это с помощью CSS:
body { background-color: black; color: white; } mark { /* Цвет фона переопределяет цвет всей страницы */ background-color: red; color: black; }
Красный цвет фона применяется к тексту тега
<mark>
. Действительно, даже если фон html-страницы черный, это свойство CSS для наиболее специфичного элемента имеет приоритет (смотрите рисунок, приведенный ниже):
Красный выделенный текст на черном фоне
Тот же принцип применим ко всем HTML-тегам и свойствам CSS. Если вы скажете:
- Текст абзацев у меня отображается шрифтом с размером 1,2em;
- Важные тексты (
<strong>
) у меня отображается шрифтом с размером 1,4 em.
… то можете подумать, что возникнет конфликт. Если важный текст является частью абзаца, шрифтом какого размера он должен отображаться? 1,2 em или 1,4 em? CSS решит, что наиболее специфичное объявление имеет приоритет: поскольку
<strong>
соответствует более специфичному элементу, чем параграфы, текст будет выводиться шрифтом с размером 1.4 em.
background | htmlbook.ru
CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
2.1 | 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
3 | 9.0+ | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ |
Описание
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения
могут идти в любом порядке, браузер сам определит, какое из них соответствует
нужному свойству. Для подробного ознакомления смотрите
информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Синтаксис
Здесь:
<фон> = | inherit
<последний_фон> = | inherit
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке.
Ни одно значение не является обязательным,
поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.
Пример 1
XHTML 1.0CSS2.1IECrOpSaFx
Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
Пример 2
HTML5CSS3IECrOpSaFx
Значение RGB
В HTML, цвет может быть указан как RGB значение, используя эту формулу:
RGB (красный, зеленый, синий)
Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета между 0 и 255.
Например, RGB (255, 0, 0) отображается красным цветом, так как красный цвет устанавливается в его наивысшее значение (255), а остальные устанавливаются в 0.
Для отображения черного цвета, все параметры цвета должны быть установлены в 0, как это: RGB (0, 0, 0).
Для отображения белого цвета, все параметры цвета должны быть установлены в 255, как это: RGB (255, 255, 255).
Экспериментируйте, смешивая значения RGB ниже:
RED
255
GREEN
BLUE
rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)
Оттенки серого часто определяются с использованием одинаковых значений для всех 3 источников света:
Универсальное свойство background
Мы с Вами рассмотрели все свойства, которые предназначены для работы с фоновыми изображениями. В большинстве случаев вводить длинные названия рассмотренных выше свойств непродуктивно, но это не значит, что мы зря потратили на это время — без понимания как они работают по отдельности, вы не сможете грамотно их применять в одном объявлении.
Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.
Свойство background имеет следующий синтаксис:
background: "color image position/size repeat origin clip attachment;
Где значения соответствуют вышерассмотренным нами свойствам:
- background-color (color | transparent).
- background-image (url | none).
- background-position (значение).
- background-size (auto | length | cover | contain).
- background-repeat (repeat | repeat-x |repeat-y | no-repeat).
- background-origin (padding-box | border-box | content-box).
- background-clip (border-box | padding-box | content-box).
- background-attachment (scroll | fixed | local).
Давайте рассмотрим пример использования универсального свойства background:
Пример использования универсального свойства background
И так, что мы сделали в этом примере:
- Мы установили для элементов <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».