Bagaimana cara membuat efek kaca / blur CSS berfungsi untuk overlay?

Saya mengalami masalah dalam menerapkan efek blur pada div overlay semi transparan. Saya ingin semua yang ada di belakang div dikaburkan, seperti ini:

Ini adalah jsfiddle yang tidak berfungsi: http://jsfiddle.net/u2y2091z/

Ada ide bagaimana membuat ini bekerja? Saya ingin membuat ini sesederhana mungkin dan menjadikannya lintas-browser. Inilah CSS yang saya gunakan:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

Berikut ini contoh yang menggunakan svgfilter.

Idenya adalah menggunakan svgelemen yang heightsama dengan #overlaydan menerapkan feGaussianblurfilter di atasnya. Filter ini diterapkan pada sebuah svg imageelemen. Untuk memberikan efek ekstrusi, Anda dapat menggunakan a box-shadowdi bagian bawah overlay.

Dukungan Browser untuk svgfilter .

Demo on Codepen

body {
  background: #222222;
}
#container {
  position: relative;
  width: 450px;
  margin: 0 auto;
}
img {
  height: 300px;
}
#overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  color: rgba(130, 130, 130, 0.5);
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

<div id="container">
  <img src="http://lorempixel.com/450/300/sports" />
  <div id="overlay">WET</div>
  <svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;">
    <defs>
      <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
      </filter>
    </defs>
    <image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" />
  </svg>
</div>

Untuk jawaban yang lebih sederhana dan terkini:

backdrop-filter: blur(6px);

Perhatikan bahwa dukungan browser tidak sempurna, tetapi dalam banyak kasus, keburaman tidak penting.

Saya dapat mengumpulkan informasi dari semua orang di sini dan selanjutnya Googling, dan saya menemukan yang berikut ini yang berfungsi di Chrome dan Firefox: http://jsfiddle.net/xtbmpcsu/ . Saya masih berusaha membuat ini berfungsi untuk IE dan Opera.

Kuncinya adalah meletakkan konten di dalam div tempat filter diterapkan:

<div id="mask">
    <p>Lorem ipsum ...</p>
    <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

Dan kemudian CSS:

body {
    background: #300000;
    background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
    color: white;
}
#mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
}
img {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    position: absolute;
    left: 100px;
    top: 100px;
    height: 300px;
    width: auto;
}

Jadi masker telah menerapkan filter. Juga, perhatikan penggunaan url () untuk filter dengan <svg>tag untuk nilai - ide tersebut berasal dari http://codepen.io/AmeliaBR/pen/xGuBr . Jika Anda kebetulan mengecilkan CSS Anda, Anda mungkin perlu mengganti spasi apa pun di markup filter SVG dengan "% 20".

Jadi sekarang, semua yang ada di dalam div mask sudah kabur.

Jika Anda mencari pendekatan lintas-browser yang andal saat ini , Anda tidak akan menemukan pendekatan yang hebat. Pilihan terbaik yang Anda miliki adalah membuat dua gambar (ini dapat diotomatiskan di beberapa lingkungan), dan mengaturnya sedemikian rupa sehingga satu melapisi yang lain. Saya telah membuat contoh sederhana di bawah ini:

<figure class="js">
    <img src="http://i.imgur.com/3oenmve.png" />
    <img src="http://i.imgur.com/3oenmve.png?1" class="blur" />
</figure>

figure.js {
    position: relative;
    width: 250px; height: 250px;
}

figure.js .blur {
    top: 0; left: 0;
    position: absolute;
    clip: rect( 0, 250px, 125px, 0 );
}

Meskipun efektif, pendekatan ini pun belum tentu ideal. Itu dikatakan, itu menghasilkan hasil yang diinginkan .

Inilah solusi yang mungkin.

HTML

<img id="source" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />

<div id="crop">
    <img id="overlay" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

CSS

#crop {
    overflow: hidden;

    position: absolute;
    left: 100px;
    top: 100px;

    width: 450px;
    height: 150px;
}

#overlay {
    -webkit-filter:blur(4px);
    filter:blur(4px);

    width: 450px;
}

#source {
    height: 300px;
    width: auto;
    position: absolute;
    left: 100px;
    top: 100px;
}

Saya tahu CSS dapat disederhanakan dan Anda mungkin harus membuang id. Idenya di sini adalah menggunakan div sebagai wadah pemangkasan dan kemudian menerapkan blur pada duplikat gambar. Biola

Untuk membuat ini berfungsi di Firefox, Anda harus menggunakan peretasan SVG .

background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);

Alih-alih menambahkan latar belakang buram lain ke konten Anda, Anda dapat menggunakan filter latar belakang . FYI IE 11 dan Firefox mungkin tidak mendukungnya. Periksa caniuse .

Demo:

header {
  position: fixed;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
}
body {
  margin: 0;
}

<header>
  Header
</header>
<div>
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
</div>

Saya datang dengan solusi ini.

Klik untuk melihat gambar efek buram

Ini adalah semacam trik yang menggunakan anak yang diposisikan secara absolut div, menyetel gambar latar belakangnya sama dengan induknya div, lalu menggunakan background-attachment:fixedproperti CSS bersama-sama dengan backgroundproperti yang sama yang disetel pada elemen induk.

Kemudian Anda menerapkan filter:blur(10px)(atau nilai apa pun) pada div anak.

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.background{
    position: relative;
    width:100%;
    height:100vh;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
}

.blur{
    position: absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    filter:blur(10px);
    transition:filter .5s ease;
    backface-visibility: hidden;
}

.background:hover .blur{
    filter:blur(0);
}
.text{
    display: inline-block;
    font-family: sans-serif;
    color:white;
    font-weight: 600;
    text-align: center;
    position: relative;
    left:25%;
    top:50%;
    transform:translate(-50%,-50%);
}

<head>
    <title>Blurry Effect</title>
</head>
<body>
    <div class="background">
        <div class="blur"></div>
        <h1 class="text">This is the <br>blurry side</h1>
    </div>
</body>
</html>

lihat di codepen

Berikut adalah solusi yang berfungsi dengan latar belakang tetap, jika Anda memiliki latar belakang tetap dan Anda memiliki beberapa elemen overlay dan Anda memerlukan latar belakang buram untuk mereka, solusi ini berfungsi:

Gambar kami memiliki HTML sederhana ini:

<body> <!-- or any wrapper -->
   <div class="content">Some Texts</div>
</body>

Latar belakang tetap untuk <body>atau elemen pembungkus:

body {
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Dan di sini misalnya kami memiliki elemen overlay dengan latar belakang transparan putih:

.content {
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
}

Sekarang kita perlu menggunakan gambar latar belakang yang sama persis dengan pembungkus kita untuk elemen overlay kita juga, saya menggunakannya sebagai :beforepsuedo-class:

.content:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(5px);
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Karena latar belakang tetap bekerja dengan cara yang sama pada elemen pembungkus dan lapisan, kami memiliki latar belakang dalam posisi gulir yang persis sama dari elemen yang dihamparkan dan kami dapat memburamkannya. Ini biola yang berfungsi, diuji di Firefox, Chrome, Opera dan Edge: https://jsfiddle.net/0vL2rc4d/

CATATAN: Di firefox ada bug yang membuat layar berkedip saat menggulir dan ada latar belakang buram yang diperbaiki. jika ada perbaikan, beri tahu saya

Ini akan melakukan overlay blur pada konten:

.blur{
 display:block;
 bottom: 0;
 left: 0;
 position: fixed;
 right: 0;
 top: 0;
 -webkit-backdrop-filter: blur(15px);
 backdrop-filter: blur(15px);
 background-color: rgba(0, 0, 0, .5);
}