Главная

Цвет и фон

На чтение 20 мин. Просмотров 3 Опубликовано

Изменяем цвет текста с помощью атрибута 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 значений:

  1. – Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не помещается. Это по умолчанию;
  2. – Фоновое изображение повторяется только по горизонтали;
  3. – Фоновое изображение повторяется только по вертикали;
  4. – Фоновое изображение не повторяется. Изображение будет показано только один раз;
  5. – Фоновое изображение повторяется в максимально возможной степени без отсечения. При необходимости добавляются свободные пространства между изображениями;
  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 &nbsp
antiquewhite #FAEBD7 &nbsp
aquamarine #7FFFD4 &nbsp
azure #F0FFFF &nbsp
beige #F5F5DC &nbsp
bisque #FFE4C4 &nbsp
black #000000 &nbsp
blanchedalmond #FFEBCD &nbsp
blue #0000FF &nbsp
blueviolet #8A2BE2 &nbsp
brown #A52A2A &nbsp
burlywood #DEB887 &nbsp
cadetblue #5F9EA0 &nbsp
chartreuse #7FFF00 &nbsp
chocolate #D2691E &nbsp
coral #FF7F50 &nbsp
cornflowerblue #6495ED &nbsp
cornsilk #FFF8DC &nbsp
crimson #DC143C &nbsp
cyan #00FFFF &nbsp
darkblue #00008B &nbsp
darkcyan #008B8B &nbsp
darkgoldenrod #B8860B &nbsp
darkgray #A9A9A9 &nbsp
darkgreen #006400 &nbsp
darkkhaki #BDB76B &nbsp
darkmagenta #8B008B &nbsp
darkolivegreen #556B2F &nbsp
darkorange #FF8C00 &nbsp
darkorchid #9932CC &nbsp
darkred #8B0000 &nbsp
darksalmon #E9967A &nbsp
darkseagreen #8FBC8F &nbsp
darkslateblue #483D8B &nbsp
darkslategray #2F4F4F &nbsp
darkturquoise #00CED1 &nbsp
darkviolet #9400D3 &nbsp
deeppink #FF1493 &nbsp
deepskyblue #00BFFF &nbsp
dimgray #696969 &nbsp
dodgerblue #1E90FF &nbsp
firebrick #B22222 &nbsp
floralwhite #FFFAF0 &nbsp
forestgreen #228B22 &nbsp
fuchsia #FF00FF &nbsp
gainsboro #DCDCDC &nbsp
ghostwhite #F8F8FF &nbsp
gold #FFD700 &nbsp
goldenrod #DAA520 &nbsp
gray #808080 &nbsp
green #008000 &nbsp
greenyellow #ADFF2F &nbsp
honeydew #F0FFF0 &nbsp
hotpink #FF69B4 &nbsp
indianred #CD5C5C &nbsp
indigo #4B0082 &nbsp
ivory #FFFFF0 &nbsp
khaki #F0E68C &nbsp
lavender #E6E6FA &nbsp
lavenderblush #FFF0F5 &nbsp
lawngreen #7CFC00 &nbsp
lemonchiffon #FFFACD &nbsp
lightblue #ADD8E6 &nbsp
lightcoral #F08080 &nbsp
lightcyan #E0FFFF &nbsp
lightgoldenrodyellow #FAFAD2 &nbsp
lightgreen #90EE90 &nbsp
lightgrey #D3D3D3 &nbsp
lightpink #FFB6C1 &nbsp
lightsalmon #FFA07A &nbsp
lightseagreen #20B2AA &nbsp
lightskyblue #87CEFA &nbsp
lightslategray #778899 &nbsp
lightsteelblue #B0C4DE &nbsp
lightyellow #FFFFE0 &nbsp
lime #00FF00 &nbsp
limegreen #32CD32 &nbsp
linen #FAF0E6 &nbsp
magenta #FF00FF &nbsp
maroon #800000 &nbsp
mediumaquamarine #66CDAA &nbsp
mediumblue #0000CD &nbsp
mediumorchid #BA55D3 &nbsp
mediumpurple #9370DB &nbsp
mediumseagreen #3CB371 &nbsp
mediumslateblue #7B68EE &nbsp
mediumspringgreen #00FA9A &nbsp
mediumturquoise #48D1CC &nbsp
mediumvioletred #C71585 &nbsp
midnightblue #191970 &nbsp
mintcream #F5FFFA &nbsp
mistyrose #FFE4E1 &nbsp
moccasin #FFE4B5 &nbsp
navajowhite #FFDEAD &nbsp
navy #000080 &nbsp
oldlace #FDF5E6 &nbsp
olive #808000 &nbsp
olivedrab #6B8E23 &nbsp
orange #FFA500 &nbsp
orangered #FF4500 &nbsp
orchid #DA70D6 &nbsp
palegoldenrod #EEE8AA &nbsp
palegreen #98FB98 &nbsp
paleturquoise #AFEEEE &nbsp
palevioletred #DB7093 &nbsp
papayawhip #FFEFD5 &nbsp
peachpuff #FFDAB9 &nbsp
peru #CD853F &nbsp
pink #FFC0CB &nbsp
plum #DDA0DD &nbsp
powderblue #B0E0E6 &nbsp
purple #800080 &nbsp
red #FF0000 &nbsp
rosybrown #BC8F8F &nbsp
royalblue #4169E1 &nbsp
saddlebrown #8B4513 &nbsp
salmon #FA8072 &nbsp
sandybrown #F4A460 &nbsp
seagreen #2E8B57 &nbsp
seashell #FFF5EE &nbsp
sienna #A0522D &nbsp
silver #C0C0C0 &nbsp
skyblue #87CEEB &nbsp
slateblue #6A5ACD &nbsp
slategray #708090 &nbsp
snow #FFFAFA &nbsp
springgreen #00FF7F &nbsp
steelblue #4682B4 &nbsp
tan #D2B48C &nbsp
teal #008080 &nbsp
thistle #D8BFD8 &nbsp
tomato #FF6347 &nbsp
turquoise #40E0D0 &nbsp
violet #EE82EE &nbsp
wheat #F5DEB3 &nbsp
white #FFFFFF &nbsp
whitesmoke #F5F5F5 &nbsp
yellow #FFFF00 &nbsp
yellowgreen #9ACD32 &nbsp

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». 
    










    

        
Оцените статью

		
    



    

		
        		            



Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134





    





    	

		
Добавить комментарий 
 



 


 
 


 


	

	

    



            

        


        


    
                    
        

                    

    


    



    
    




    

    

        

                    

    



    

        


            
            


    

        © 2022