Кратко
Секция статьи "Кратко"При помощи свойства background
можно задать цвет фона элемента. Задать фоновый цвет можно любому элементу — строчному (inline), блочному (block) или строчно-блочному (inline-block).
Пример
Секция статьи "Пример"<div class="parent"> <p class="block">Розовый — цвет, образующийся...</p> <span class="inline">Жёлтый — самый лёгкий и яркий цвет...</span> <div class="inline-block">Зелёный цвет...</div></div>
<div class="parent"> <p class="block">Розовый — цвет, образующийся...</p> <span class="inline">Жёлтый — самый лёгкий и яркий цвет...</span> <div class="inline-block">Зелёный цвет...</div> </div>
.block { background-color: pink;}.inline { background-color: rgb(255 216 41);}.inline-block { background-color: #49a16c;}
.block { background-color: pink; } .inline { background-color: rgb(255 216 41); } .inline-block { background-color: #49a16c; }
В примере выше показаны блоки всех трёх типов отображения. С фоном для блочных и строчно-блочных элементов проблем не возникает, а вот со строчными элементами всё не так просто.
Если высота строки (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> Email: <input class="input" type="text" placeholder="Введите ваш email"> </label> <button class="submit">Подписаться</button></form>
<form class="form"> <label> Email: <input class="input" type="text" placeholder="Введите ваш email"> </label> <button class="submit">Подписаться</button> </form>
.form { /* Фон для всей формы */ background-color: #ffd829;}.input { /* Прозрачное поле ввода */ background-color: transparent;}.submit { /* Чёрный фон для кнопки */ background-color: black; /* Анимируем всё анимируемое */ transition: 0.3s ease-in-out;}.submit:hover { /* Прозрачный фон при наведении курсора */ background-color: transparent;}
.form { /* Фон для всей формы */ background-color: #ffd829; } .input { /* Прозрачное поле ввода */ background-color: transparent; } .submit { /* Чёрный фон для кнопки */ background-color: black; /* Анимируем всё анимируемое */ transition: 0.3s ease-in-out; } .submit:hover { /* Прозрачный фон при наведении курсора */ background-color: transparent; }
🛠 Если вам нужен градиент, то background
вам не подойдёт. Градиенты можно задать только при помощи background
.
🛠 Если нужен блок с «рваным» краем, но без пробела между строками, то для этого есть множество трюков. Один из них:
<div class="parent"> Чем отличается маркер от текстовыделителя? <span class="bkg"> Текстовыделительные маркеры заправляются флуоресцентными полупрозрачными чернилами. Они не покрывают поверхность бумаги плотным слоем, не пропускающим свет, как это делают обычные маркеры на водной или спиртовой основе. </span></div>
<div class="parent"> Чем отличается маркер от текстовыделителя? <span class="bkg"> Текстовыделительные маркеры заправляются флуоресцентными полупрозрачными чернилами. Они не покрывают поверхность бумаги плотным слоем, не пропускающим свет, как это делают обычные маркеры на водной или спиртовой основе. </span> </div>
.parent { padding: 25px;}.bkg { font-size: 16px; line-height: 1.5; background-color: #ffd829; /* Тень для каждой строки, перекрывающая пробел */ box-shadow: 0 6px 0 #ffd829;}
.parent { padding: 25px; } .bkg { font-size: 16px; line-height: 1.5; background-color: #ffd829; /* Тень для каждой строки, перекрывающая пробел */ box-shadow: 0 6px 0 #ffd829; }
🛠 С помощью полупрозрачного фонового цвета у псевдоэлемента можно создать красивый оверлей поверх фотографий или фоновых изображений. Это круто, потому что фоном можно будет ставить любую фотографию, и она в большинстве случаев не будет выбиваться из дизайна.
<header class="header"> <h1 class="title">The best site all over the world!</h1></header>
<header class="header"> <h1 class="title">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
можно задать любую картинку фоном, и поверх неё всегда будет голубой оверлей 💁♀️