Что такое множественный фон и почему это круто?
Привет! Ты когда-нибудь задумывался, как на некоторых сайтах делают такие классные эффекты с фонами — например, затемненные фотографии с текстом, красивые наложения цветов или даже целые рисунки без использования картинок? Сегодня я расскажу тебе о секретном оружии веб-разработчиков — множественных фонах в CSS!
Это как если бы у тебя было несколько прозрачных листов бумаги, которые ты накладываешь друг на друга, создавая классную многослойную картинку. Звучит интересно? Тогда поехали!
Основы свойства background
Перед тем как мы погрузимся в множественные фоны, давай быстро вспомним, что такое свойство background в CSS. Это супер-свойство, которое объединяет несколько других свойств:
- background-color — цвет фона
- background-image — изображение фона
- background-position — положение фона
- background-size — размер фона
- background-repeat — повторение фона
- и ещё несколько
Вот простой пример:
css.мой-элемент {
background: url(классное-фото.jpg) top left/50px 50px no-repeat;
}
Этот код означает:
- Используй картинку "классное-фото.jpg"
- Разместить её в верхнем левом углу (top left)
- Задать размер 50px на 50px (это после слеша /)
- Не повторять изображение (no-repeat)
Позиционирование фона — как это работает?
Представь, что у нашего элемента есть своя система координат. Верхний левый угол — это начальная точка (0,0). Когда мы задаём положение фона, мы указываем, где именно его разместить относительно этого угла.
css.мой-элемент {
/* Позиционируем фон по центру */
background: url(классное-фото.jpg) center/50px 50px no-repeat;
/* Или даже точнее — 20px от левого края и 30px от верхнего */
background: url(классное-фото.jpg) 20px 30px/50px 50px no-repeat;
}
Важная деталь! Когда указываешь позицию и размер в сокращённой записи свойства background, всегда пиши так:
url(адрес-картинки) позиция/размер другие-свойства
Символ слеша / разделяет позицию и размер. Если написать наоборот, браузер не поймёт, чего ты хочешь.
Размер фонового изображения
Размер фона задаётся с помощью background-size или через слеш / в сокращённой записи. Первое число — это ширина, а второе — высота.
css.мой-элемент {
/* Ширина 100px, высота 200px */
background: url(классное-фото.jpg) center/100px 200px no-repeat;
}
Если ширина и высота одинаковые, можно указать только одно значение:
css.мой-элемент {
/* Квадрат 100px на 100px */
background: url(классное-фото.jpg) center/100px no-repeat;
}
Волшебство множественного фона
А теперь самое интересное! В CSS можно задать несколько слоёв фона для одного элемента, просто разделив их запятыми. Первый указанный фон будет сверху, второй — под ним, и так далее.
css.мой-элемент {
background:
url(верхнее-фото.jpg) top left/50px 50px no-repeat,
url(нижнее-фото.jpg) center/cover no-repeat;
}
Получается, что верхнее-фото.jpg будет отображаться поверх нижнее-фото.jpg. Это очень важно понимать!
Вот более наглядный пример того, как выглядит элемент с двумя фонами:
css.пример-двух-фонов {
width: 300px;
height: 200px;
background:
url(значок.png) center/50px no-repeat,
url(фон.jpg) center/cover no-repeat;
}
Здесь значок размером 50x50 пикселей будет расположен в центре, а под ним — фоновое изображение, растянутое на весь элемент.
Сплошные цвета с помощью градиентов
Очень полезный трюк: с помощью градиентов можно создавать сплошные цвета! Если оба цвета в градиенте одинаковые, получится равномерная заливка.
css.сплошной-цвет {
/* Синий прямоугольник */
background: linear-gradient(#3c88EC, #3c88EC);
}
Это может показаться бессмысленным — зачем использовать градиент, если можно просто задать background-color: #3c88EC? Но когда мы начнём комбинировать множественные фоны, это станет очень полезным!
Крутые приёмы с множественными фонами
1. Затемнение фотографии
Часто на сайтах нужно разместить текст поверх фото. Но если не затемнить фото, текст может быть плохо виден. Множественные фоны решают эту проблему!
css.затемненное-фото {
width: 100%;
height: 400px;
background:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url(красивый-пейзаж.jpg) center/cover;
color: white; /* Белый текст */
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
Этот код создаёт полупрозрачный чёрный слой поверх фотографии, делая текст на ней гораздо более читаемым!
Вот как это можно использовать в HTML:
html<div class="затемненное-фото">
Привет, мир!
</div>
2. Тонирование фотографии
Хочешь придать фотографии определённый цветовой оттенок? Легко!
css.тонированное-фото {
width: 100%;
height: 400px;
background:
linear-gradient(135deg, rgba(255, 0, 0, 0.3), rgba(0, 0, 255, 0.3)),
url(красивый-пейзаж.jpg) center/cover;
}
Этот код накладывает градиент от полупрозрачного красного до полупрозрачного синего поверх фотографии!
3. Рисуем с помощью CSS!
Одна из самых крутых фишек множественных фонов — возможность рисовать, используя только CSS, без единой картинки! Давай попробуем нарисовать простую мишень:
css.мишень {
width: 200px;
height: 200px;
background:
radial-gradient(circle at center, red 0, red 20%, white 20%, white 40%, red 40%, red 60%, white 60%, white 80%, red 80%, red 100%);
border-radius: 50%;
}
А вот более сложный пример — давай нарисуем простой ноутбук с помощью CSS:
css.ноутбук {
width: 200px;
height: 120px;
margin: 50px auto;
background:
/* Экран (белый прямоугольник) */
linear-gradient(white, white) center 10px/150px 80px no-repeat,
/* Рамка экрана (черный прямоугольник) */
linear-gradient(#222, #222) center 5px/160px 90px no-repeat,
/* Корпус (серый прямоугольник) */
linear-gradient(#888, #888) center bottom/190px 10px no-repeat,
/* Левый скругленный угол корпуса */
radial-gradient(10px at 10px 10px, #888 50%, transparent 50%) left bottom/20px 20px no-repeat,
/* Правый скругленный угол корпуса */
radial-gradient(10px at 10px 10px, #888 50%, transparent 50%) right bottom/20px 20px no-repeat;
}
4. Делаем чёрно-белую фотографию
Хочешь превратить цветную фотографию в чёрно-белую? Используй свойство background-blend-mode:
css.черно-белое-фото {
width: 100%;
height: 400px;
background:
linear-gradient(black, black),
url(цветное-фото.jpg) center/cover;
background-blend-mode: color;
}
Режим смешивания color уберёт все цвета из фотографии, оставив только яркость и контрастность!
Практические советы
- Порядок важен! Помни, что первый указанный фон будет сверху, а последний — внизу.
- Используй CSS-переменные для сложных дизайнов:
css:root {
--экран: linear-gradient(white, white);
--экран-размер: 150px 80px;
--экран-позиция: center 10px;
}
.ноутбук {
background-image: var(--экран);
background-size: var(--экран-размер);
background-position: var(--экран-позиция);
} - Не злоупотребляй! Слишком много слоёв фона могут замедлить работу страницы, особенно на старых устройствах.
- Тестируй в разных браузерах. Некоторые старые браузеры могут не поддерживать множественные фоны.
Множественные фоны в CSS — это настоящее волшебство! С их помощью ты можешь:
- Затемнять и тонировать фотографии
- Создавать сложные эффекты наложения
- Рисовать без использования картинок
- Делать чёрно-белые фотографии
- И многое, многое другое!
Пробуй, экспериментируй и создавай свои уникальные эффекты с помощью CSS. Удачи в творчестве! 🎨✨