Размыть весь фон, кроме прозрачного div?

Взгляните на картинку. Я хочу, чтобы весь фон был размыт (как сейчас), кроме отмеченной области (div). Div прозрачен, и я хочу, чтобы вы могли ясно видеть сквозь него.

Вы можете увидеть здесь, что я имею в виду: https://i.stack.imgur.com/4IvYB.png

Попробуйте добавить на тело белое наложение с частично прозрачным фоном. Затем сделайте индекс z панели навигации выше, чем оверлей. Кроме того, переполнение стека — это веб-сайт, на котором можно попросить помощи по вашему коду, а не запрашивать код.

Astro 03.02.2019 21:05
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
1
446
1

Ответы 1

Вот что я нашел!

HTML

<div class = "bg-image"></div>

CSS

body, html {
  height: 100%;
  margin: 0;
}

.bg-image {
  /* The image used */
  background-image: url("https://i.imgur.com/R4jk5aR.jpg");

  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Другие вопросы по теме

Похожие вопросы