|
Руст Кулматов
|
||||||||
|
Проще всего было бы использовать свойство |
||||||||
<!-- index.html -->
<div class="box">
<div class="panel">We are fighting
for the survival of our culture, while
there are cultural relativists
in power</div>
</div>
.box {
background: url('https://picsum.photos/500/500');
display: flex;
align-items: center;
justify-content: center;
}
.panel {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
We are fighting for the survival of our culture, while there are cultural relativists in power
|
К сожалению, это свойство поддерживает только Сафари и самая свежая версия Эджа. В Хроме можно включить экспериментальную поддержку с помощью флага. Но современные браузеры поддерживают свойство Сверстаем плашку без размытия: |
Поддержка backdrop-filter
|
|||||||
<!-- index.html -->
<div class="box">
<div class="panel">We are fighting
for the survival of our culture, while
there are cultural relativists
in power</div>
</div>
.box {
background: url('https://picsum.photos/500/500');
display: flex;
align-items: center;
justify-content: center;
}
.panel {
width: 300px;
padding: 20px;
border: .5px solid #fff;
color: #fff;
text-align: center;
filter: blur(5px)
}
We are fighting for the survival of our culture, while there are cultural relativists in power
|
Продублируем фон в плашку с помощью псевдоэлемента и вынесем текст на отдельный слой, чтобы дублирующий фон не перекрывал его: |
||||||||
<!-- index.html -->
<div class="box">
<div class="panel">
<div class="text">We are fighting
for the survival of our culture, while
there are cultural relativists
in power</div>
</div>
</div>
.box {
background: url('https://picsum.photos/500/500');
/* ... */
}
.panel {
position: relative;
/* ... */
}
.panel::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: url('https://picsum.photos/500/500');
}
.text {
position: relative;
}
We are fighting for the survival of our culture, while there are cultural relativists in power
|
Зададим дублирующему фону такие же размеры и выравнивание, как у родительского элемента: |
||||||||
.panel::before {
/* ... */
background-size: 500px 300px;
background-position: center;
}
We are fighting for the survival of our culture, while there are cultural relativists in power
|
И добавим продублированному фону размытие: |
||||||||
.panel::before {
/* ... */
filter: blur(3px);
}
|
P. S. Это был совет о
|