Прозрачность и размытость цветного фона блока

28 мая 2021, 20:50

Как сделать блоку и прозрачность и размытость как в центре уведомлений в Windows 10 с помощью CSS?

Уже знаю как сделать размытый фон для блока: Filter blur для блока: как размыть только фон?

Но как сделать так, чтобы блок был и прозрачным (на 0.5, допустим), и размытым (не больше 5рх), и был цвет в качестве его фона? Это самое главное.

Answer 1

Пример взят из книги "Lea Verou. CSS Secrets: Better Solutions to Everyday Web Design Problems":

/** 
 * Frosted glass effect 
 */ 
 
body { 
  min-height: 100vh; 
  box-sizing: border-box; 
  margin: 0; 
  padding-top: calc(50vh - 6em); 
  font: 150%/1.6 Baskerville, Palatino, serif; 
} 
 
body, 
main::before { 
  background: url("https://i.stack.imgur.com/52N1q.jpg") 0 / cover fixed; 
} 
 
main { 
  position: relative; 
  margin: 0 auto; 
  padding: 1em; 
  max-width: 23em; 
  background: hsla(0, 0%, 100%, .25) border-box; 
  overflow: hidden; 
  border-radius: .3em; 
  box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset, 0 .5em 1em rgba(0, 0, 0, 0.6); 
  text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3); 
} 
 
main::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  margin: -30px; 
  z-index: -1; 
  -webkit-filter: blur(20px); 
  filter: blur(20px); 
} 
 
blockquote { 
  font-style: italic 
} 
 
blockquote cite { 
  font-style: normal; 
}

<main> 
  <blockquote>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.” 
    <footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer> 
  </blockquote> 
</main>

Answer 2

Нужный вам эффект даст свойство backdrop-filter. Но, к сожалению, сейчас оно поддерживается только в Safari и iOS Safari (и в Chrome-based браузерах под флагом).

Тем не менее - с ним вы добьетесь желаемого:

.wrapper { 
  position: relative; 
} 
.cover { 
  -webkit-backdrop-filter: blur(5px); 
  backdrop-filter: blur(5px); 
  background: rgba(84, 77, 126, 0.75); 
  height: 100%; 
  left: 0; 
  position: absolute; 
  top: 0; 
  width: 300px; 
}

<div class="wrapper"> 
  <img src="https://i.stack.imgur.com/gdln9.png" alt=""> 
  <div class="cover"></div> 
</div>

Cмотреть код на jsfiddle.

Answer 3

Дело в том, что в CSS нельзя сделать размытость так, как бы это можно было бы видеть через "мутное" стекло. В цсс размытость задается именно тому блоку, который должен быть размыт.

В случае с панелью уведомления, как на вашем скрине - так сделать практически не реально. Потому что в этом случае кажется, что размытие придает именно панель нотификаций, но в цсс размытие должно быть только у блока.

"Но как сделать так, чтобы блок был и прозрачным (на 0.5 допустим) и размытым (не больше 5рх) и был цвет в качестве его фона."

Т.к. размытым должен быть именно блок конкретный - то это делается примерно так:

{
    filter: blur(2px);
    background: rgba(174, 0, 255, 0.47);
}

Блок будет полупрозрачным и размытым.

Answer 4

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