Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 16 из 53 · 12 мин
Фоновые картинки, размер, позиция, повтор, градиенты и несколько фонов сразу.
На первом экране — большое фото на всю ширину и тёмный градиент поверх, чтобы белый текст читался.
Фонов можно несколько, через запятую. Первый — сверху.
background-imageurl(...) или градиент.<style>
.hero { background-image: url(https://picsum.photos/id/431/400/160); height: 100px; }
</style>
<div class="hero"></div>background-sizecover — заполнить, обрезав лишнее; contain — целиком.<style>
.hero { background: url(https://picsum.photos/id/431/400/300) center/cover; height: 100px; }
</style>
<div class="hero"></div>background-positioncenter, top right, 50% 20%.<style>
.hero { background: url(https://picsum.photos/id/431/400/300) no-repeat; background-size: cover; background-position: center top; height: 100px; }
</style>
<div class="hero"></div>background-repeatno-repeat, repeat-x, repeat.<style>
.dots { background-image: radial-gradient(#c8763a 2px, transparent 2px); background-size: 16px 16px; background-repeat: repeat; height: 60px; }
</style>
<div class="dots"></div>background-attachmentfixed — фон стоит на месте при прокрутке.background-clippadding-box, content-box, text — фон только под текстом.<style>
h1 { background: linear-gradient(90deg, #6b3e26, #c8763a); background-clip: text; color: transparent; }
</style>
<h1>Градиентный текст</h1>backgroundbackground: url(x.jpg) center/cover no-repeat, #6b3e26;.<style>
.hero { background: linear-gradient(rgb(0 0 0 / 60%), transparent), url(https://picsum.photos/id/431/400/300) center/cover; color: white; height: 100px; padding: 12px; }
</style>
<div class="hero">Затемнение поверх фото</div>linear-gradient()linear-gradient(направление, цвет1, цвет2).<style>
.g { background: linear-gradient(135deg, #6b3e26, #c8763a); height: 60px; }
</style>
<div class="g"></div>radial-gradient()radial-gradient(circle, ...).<style>
.g { background: radial-gradient(circle at 30% 50%, #c8763a, #fdf6ec 60%); height: 60px; }
</style>
<div class="g"></div>conic-gradient()<style>
.pie { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#6b3e26 0 70%, #fdf6ec 0); }
</style>
<div class="pie"></div>url()Текст поверх фото — всегда с затемнением градиентом. Контраст важнее красоты.
Задай .hero фон: сверху градиент linear-gradient(rgb(0 0 0 / 60%), transparent), под ним фото — и background-size: cover.
Выберите один ответ.
Что делает background-size: cover?
Выберите один ответ.
В background: A, B какой слой сверху?
Проверяем состояние обучения…