Как затемнить и размыть фоновое изображение, как в дизайнерских макетах? 

Я добавил два фоновых изображения на сайт, но они выглядят иначе, чем в макете: в дизайне изображения более размытые и тёмные, а на сайте — чище и светлее (см. скриншот). Использованы ли в макете тени или наложения (overlay)? Если да, какие конкретно CSS‑значения (shadow, blur, opacity и т.д.) нужно задать, чтобы воспроизвести тот же эффект? <br/>
  • 29 мая 2026 г. 17:00
Ответы на вопрос 1 
Коротко — в макете обычно используют два приёма одновременно:
1) тёмная полупрозрачная заливка (overlay) над изображением, чтобы снизить яркость/контраст;  
2) размытие (blur) самого фонового изображения.  

Ниже — практические приёмы и готовые CSS‑шаблоны, которые дают тот же визуальный эффект. Подберите значения (px, opacity) под ваш макет — я привёл рекомендуемые стартовые параметры.

1) Простое затемнение (без blur)
- Быстро и кросс‑браузерно: добавляем градиент поверх фоновой картинки (много сайтов используют именно это).
CSS:
.hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    url('bg.jpg');
  background-size: cover;
  background-position: center;
  /* высота/паддинги и т.д. */
}
Пояснение: rgba(0,0,0,0.45) — тёмный overlay с 45% непрозрачности. Меняйте 0.3–0.6 по необходимости.

2) Если нужно и размыть фон, и оставить контент чётким — используйте отдельный слой (псевдо‑элемент)
- filter: blur(...) применён к слою с картинкой, а сам контент (.hero) остаётся резким.
CSS:
.hero {
  position: relative;
  z-index: 1;
  overflow: hidden; /* чтобы размытый край не выступал */
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0;right:0;bottom:0;left:0 */
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(0.6) saturate(0.95);
  transform: scale(1.03); /* предотвращает видимые края при blur */
  z-index: -1;
}
/* Если нужно ещё темнее — добавьте ::after с overlay */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 0;
}
Параметры для начала: blur(6–12px), brightness(0.5–0.8), overlay rgba(0,0,0,0.25–0.6). Transform scale ~1.02–1.05 убирает «светлые» края после размытия.

3) Вариант с background‑blend‑mode (альтернатива overlay)
.hero {
  background-image: url('bg.jpg'), linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45));
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
}
background-blend-mode = multiply/overlay может давать другой тон наложения, поиграйте с mode.

4) backdrop-filter — для эффекта «размыть то, что позади полупрозрачного слоя»
- Работает, если у вас полупрозрачный блок, и вы хотите размыть фон страницы под ним. Поддержка браузеров менее универсальна.
.example {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(8px) saturate(0.95);
  -webkit-backdrop-filter: blur(8px);
}

5) Дополнительно — shadow/box-shadow
- box-shadow даёт тёмную рамку или глубину, но не влияет на яркость изображения. Обычно designers используют overlay + blur, а не box-shadow для всех фоновых картинок.

6) Рекомендации по значениям (ориентиры)
- Затемнение overlay: rgba(0,0,0,0.3–0.6) (если тёмный фон нужен — ближе к 0.5)
- Размытие: blur(4–12px) — 8px типично для заметного, но не чрезмерного размытия
- Яркость: filter: brightness(0.5–0.8)
- Контраст/насыщенность: contrast(0.95–1.1) / saturate(0.9–1)
- Масштаб при blur: transform: scale(1.02–1.05)

7) Производительность и кросс‑браузерность
- filter: blur и backdrop-filter — ресурсоёмкие. На мобильных может тормозить.
- Используйте меньшие значения blurs, оптимизируйте изображения (webp, правильный размер), и по возможности предгенерируйте размытую версию изображения на сервере для тяжёлых случаев.

Если пришлёте ваш HTML/CSS (или скрин макета с указанием, какой эффект вам нужен), я могу предложить точный код с подобранными значениями, максимально приближёнными к макету.
Похожие вопросы
    Показать ещё