Кратко
СкопированоПри помощи свойства background можно задать цвет фона элемента. Задать фоновый цвет можно любому элементу — строчному (inline), блочному (block) или строчно-блочному (inline-block).
Пример
Скопировано
<p class="block">Розовый — цвет, образующийся...</p><span class="inline">Жёлтый — самый лёгкий и яркий цвет...</span><div class="inline-block">Английское слово blue...</div>
<p class="block">Розовый — цвет, образующийся...</p>
<span class="inline">Жёлтый — самый лёгкий и яркий цвет...</span>
<div class="inline-block">Английское слово blue...</div>
.block { background-color: rgb(244, 152, 173);}.inline { background-color: yellow;}.inline-block { background-color: #2E9AFF;}
.block {
background-color: rgb(244, 152, 173);
}
.inline {
background-color: yellow;
}
.inline-block {
background-color: #2E9AFF;
}
В примере выше показаны блоки всех трёх типов отображения. С фоном для блочных и строчно-блочных элементов проблем не возникает, а вот со строчными элементами всё не так просто.
Если высота строки (line) у строчного элемента будет больше 1, то между строками будут пробелы.
Но в заливке фона строчных элементов есть и преимущества! На последней строке фон заканчивается ровно там, где заканчивается текст.
Помимо этой особенности, в CSS-коде видно, что в качестве значения для background можно использовать любое доступное обозначение цвета в вебе.
Как понять
СкопированоСвойство background меняет цвет фона любого элемента.
Как пишется
СкопированоДля нужного селектора указываем свойства background и после двоеточия указываем цвет фона в любом доступном для веба формате.
Чёрный:
.element { background-color: black;}
.element {
background-color: black;
}
Белый:
.element { background-color: #ffffff;}
.element {
background-color: #ffffff;
}
Белый полупрозрачный:
.element { background-color: #ffffff80;}
.element {
background-color: #ffffff80;
}
Жёлтый полупрозрачный:
.element { background-color: rgb(255 255 0 / 0.5);}
.element {
background-color: rgb(255 255 0 / 0.5);
}
Помимо цвета можно задать прозрачный фон при помощи ключевого слова transparent.
Это бывает полезно для изменения цвета при наведении курсора.
Подсказки
Скопировано💡 Свойство фона не наследуется.
💡 Значение по умолчанию — прозрачный фон: transparent.
💡 Фон нельзя задать частично. Блок заливается указанным цветом полностью.
💡 В качестве значения можно указать только один цвет.
💡 Изменение цвета фона можно анимировать при помощи свойства transition 🥳
На практике
Скопированосоветует
Скопировано🛠 Если нужна красивая кнопка (<button>), то не забудьте сбросить фон: укажите для неё background. Или тот цвет фона, который нужен по дизайну. По умолчанию у всех кнопок серый фон с приветом из девяностых.
🛠 Аналогичным способом можно сделать красивые прозрачные поля ввода (input) в формах.
<form class="form"> <label> <span class="label">Email:</span> <input class="input" type="text" placeholder="Введите ваш email"> </label> <button class="button">Подписаться</button></form>
<form class="form">
<label>
<span class="label">Email:</span>
<input class="input" type="text" placeholder="Введите ваш email">
</label>
<button class="button">Подписаться</button>
</form>
.form { /* Фон для всей формы */ background-color: #18191C;}.input { /* Прозрачное поле ввода */ background-color: transparent;}.button { /* Чёрный фон для кнопки */ background-color: #2E9AFF;}.button:hover { /* Белый фон при наведении курсора */ background-color: #FFFFFF;}
.form {
/* Фон для всей формы */
background-color: #18191C;
}
.input {
/* Прозрачное поле ввода */
background-color: transparent;
}
.button {
/* Чёрный фон для кнопки */
background-color: #2E9AFF;
}
.button:hover {
/* Белый фон при наведении курсора */
background-color: #FFFFFF;
}
🛠 Если вам нужен градиент, то background вам не подойдёт. Градиенты можно задать только при помощи background.
🛠 Если нужен блок с «рваным» краем, но без пробела между строками, то для этого есть множество трюков. Один из них:
<p> Чем отличается маркер от текстовыделителя? <span class="bkg"> Текстовыделительные маркеры заправляются флуоресцентными полупрозрачными чернилами. Они не покрывают поверхность бумаги плотным слоем, не пропускающим свет, как это делают обычные маркеры на водной или спиртовой основе. </span></p>
<p>
Чем отличается маркер от текстовыделителя?
<span class="bkg">
Текстовыделительные маркеры заправляются флуоресцентными
полупрозрачными чернилами. Они не покрывают поверхность бумаги
плотным слоем, не пропускающим свет, как это делают обычные маркеры
на водной или спиртовой основе.
</span>
</p>
.bkg { background-color: #F498AD; /* Тень для каждой строки, перекрывающая пробел */ box-shadow: 0 4px 0 #F498AD;}
.bkg {
background-color: #F498AD;
/* Тень для каждой строки, перекрывающая пробел */
box-shadow: 0 4px 0 #F498AD;
}
🛠 С помощью полупрозрачного фонового цвета у псевдоэлемента можно создать красивый оверлей поверх фотографий или фоновых изображений. Это круто, потому что фоном можно будет ставить любую фотографию, и она в большинстве случаев не будет выбиваться из дизайна.
<header> <h1>The best site all over the world!</h1></header>
<header>
<h1>The best site all over the world!</h1>
</header>
header { /* Чтобы псевдоэлемент считал своё положение от этого блока */ position: relative; z-index: 0; /* Фоновое изображение на всю ширину и высоту блока */ background: url("background.png") no-repeat center / cover;}header:before { content: ""; position: absolute; z-index: -1; display: block; top: 0; left: 0; width: 100%; height: 100%; /* Оверлей поверх картинки с прозрачностью 50% */ background-color: rgba(0, 79, 130, 0.5);}
header {
/* Чтобы псевдоэлемент считал
своё положение от этого блока */
position: relative;
z-index: 0;
/* Фоновое изображение
на всю ширину и высоту блока */
background: url("background.png") no-repeat center / cover;
}
header:before {
content: "";
position: absolute;
z-index: -1;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Оверлей поверх картинки с прозрачностью 50% */
background-color: rgba(0, 79, 130, 0.5);
}
Для .header можно задать любую картинку фоном, и поверх неё всегда будет голубой оверлей 💁♀️