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


102

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

Gambar SFW

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);
}

1
FYI - CSS filtertidak didukung di Firefox, Anda tidak boleh menggunakannya.
Weafs.py

2
Mungkin membuat div buram tetapi menggunakan elemen pseudo dengan gambar sebagai latar belakangnya yang dapat diburamkan secara independen.
bjb568

1
@ chipChocolate.py Filter CSS didukung di FF35 + secara default. Tapi saya setuju dengan Anda, kami sebagai pengembang tidak boleh mengandalkannya karena ini bukan fitur lintas browser.
Hashem Qolami

Jawaban:


71

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>


70

Untuk jawaban yang lebih sederhana dan terkini:

backdrop-filter: blur(6px);

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


1
Sejauh ini, ini adalah jawaban terbaik.
tanner burton

51

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.


itu sangat pintar
Gangsar Swapurba

3
Chrome tidak menyukai final filter: url(.... Hapus itu dan Chrome berhasil menggunakan filter: blur(10px);.
Doug S

2
Apakah saya salah paham? Bukan itu yang diinginkan OP. Teks tidak boleh dikaburkan.
Eric

2
@ Eric, Anda jelas salah paham, karena penjawabnya adalah OP.
tao

10

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 .

masukkan deskripsi gambar di sini


8

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 .


@ chipChocolate.py Saya kira Anda perlu menggunakan peretasan SVG dalam kasus itu, demosthenes.info/blog/534/Crossbrowser-Image-Blur .
Juho Vepsäläinen

Perhatikan bahwa untuk filter CSS, Anda dapat menghilangkan prefiks vendor selain -webkit-karena tidak diterapkan di browser tersebut. Lebih baik meletakkan deklarasi standar di akhir - setelah semua versi yang diawali.
Hashem Qolami

@Septianjoko_ Terima kasih.
Juho Vepsäläinen

FF OK, sekarang (54.0.1 (32-bit)). Sempurna! Tx!
Pedro Ferreira

6
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>


Solusi yang sama telah diusulkan: stackoverflow.com/a/58083568/3702797
Kaiido

4

#bg, #search-bg {
  background-image: url('https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
  background-repeat: no-repeat;
  background-size: 1080px auto;
}

#bg {
  background-position: center top;
  padding: 70px 90px 120px 90px;
}

#search-container {
  position: relative;
}

#search-bg {
  /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 99;

  /* Pull the background 70px higher to the same place as #bg's */
  background-position: center -70px;

  -webkit-filter: blur(10px);
  filter: url('/media/blur.svg#blur');
  filter: blur(10px);
}

#search {
  /* Put this on top of the blurred layer */
  position: relative;
  z-index: 100;
  padding: 20px;
  background: rgb(34,34,34); /* for IE */
  background: rgba(34,34,34,0.75);
}

@media (max-width: 600px ) {
  #bg { padding: 10px; }
  #search-bg { background-position: center -10px; }
}

#search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; }
#search h2 { margin-bottom: 50px }
#search h5 { margin-top: 70px }
<div id="bg">
  <div id="search-container">
    <div id="search-bg"></div>
    <div id="search">
      <h2>Awesome</h2>
      <h5><a href="#">How it works »</a></h5>
    </div>
  </div>
</div>


1

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


0

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


0

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);
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.