Использование тени вместе с фоновым фильтром: размытие - PullRequest
Новая
       39

Использование тени вместе с фоновым фильтром: размытие

0 голосов
/ 02 сентября 2018

Я экспериментировал с backdrop-filter в последнее время, обычно использую его для размытия всего, что находится за элементом (что является динамическим, поэтому Я не могу просто использовать такие вещи, как this ). Однако мне также нужно было применить тень к указанному элементу, поэтому я просто добавил box-shadow: /* something, not inset */.
К сожалению, в результате эффект размытия был распространен на всю область, покрытую тенью (что кажется логичным, так как он называется фон фильтр). Ниже вы можете увидеть его демонстрацию (обратите внимание, что вам понадобится браузер, поддерживающий backdrop-filter, на случай, если это еще не было очевидно). 

#background {
  position: absolute;
  
  width: 600px;
  height: 300px;
  z-index: -1;
  
  background-image: url('https://lorempixel.com/600/300/');
  background-repeat: no-repeat;
}

#blurryandshadowy {
  display: inline-block;

  margin: 50px;
  padding: 50px;
  
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(15px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}
<div id="background"></div>
<div id="blurryandshadowy">
  . . .
  <br>. . .
</div>

Есть ли способ применить тень, которая не конфликтует (является ли конфликт даже глаголом?) С фильтрами фона?



П.С .: Я знаю, что backdrop-filter все еще является экспериментальной технологией, и все это может измениться в будущем
P.P.S. (что означает post-post-scriptum): При необходимости я также мог бы использовать JavaScript, поэтому он находится внутри тегов этого сообщения
P.P.P.S .: Конечно, я был бы признателен за ответ только на CSS

1 Ответ

0 голосов
/ 02 сентября 2018

Возможно, вы можете использовать два разных слоя, используя псевдоэлемент. Один слой для фильтра, а другой для тени: 

#background {
  position: absolute;
  width: 600px;
  height: 300px;
  z-index: -1;
  background-image: url('https://lorempixel.com/600/300/');
  background-repeat: no-repeat;
}

#blurryandshadowy {
  display: inline-block;
  margin: 50px;
  padding: 50px;
  position: relative;
  z-index: 0;
}

#blurryandshadowy:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1;
}

#blurryandshadowy:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}
<div id="background"></div>
<div id="blurryandshadowy">
  . . .
  <br>. . .
</div>
...