Tampaknya hamparan Apple lebih dari sekadar transparansi. Ada ide tentang cara mencapai efek ini dengan CSS dan mungkin JS?

Itu dimungkinkan dengan CSS3:

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

Contoh di sini => jsfiddle

Anda membuat saya ingin mencoba, jadi saya melakukannya, lihat contoh di sini:

http://codepen.io/Edo_B/pen/cLbrt

Menggunakan:

1. HW Dipercepat filter CSS
2. JS untuk penugasan kelas dan panah acara utama
3. Properti Gambar CSS Klip

itu dia.

Saya juga percaya ini bisa dilakukan secara dinamis untuk layar apa pun jika menggunakan kanvas untuk menyalin dom saat ini dan mengaburkannya.

[Sunting] Di masa depan (seluler) Safari 9 akan ada -webkit-backdrop-filterpersis seperti ini. Lihat ini pena saya dibuat untuk menampilkan itu.

Saya memikirkan hal ini selama 4 minggu terakhir dan muncul dengan solusi ini.

Demo Langsung

[Sunting] Saya menulis posting yang lebih mendalam tentang CSS-Trik

Teknik ini menggunakan Kawasan CSS sehingga dukungan browser bukan yang terbaik saat ini. ( http://caniuse.com/#feat=css-regions )

Bagian penting dari teknik ini adalah memisahkan konten dari tata letak dengan menggunakan Wilayah CSS. Pertama, tentukan .contentelemen dengan flow-into:contentdan kemudian gunakan struktur yang sesuai untuk mengaburkan header.

Struktur tata letak:

<div class="phone">
 <div class="phone__display">
  <div class="header">
    <div class="header__text">Header</div>
    <div class="header__background"></div>
  </div>
  <div class="phone__content">
  </div>
 </div>
</div>

Dua bagian penting dari tata letak ini adalah .header__backgrounddan .phone__content- ini adalah wadah tempat konten mengalir.

Menggunakan Daerah CSS itu sederhana seperti flow-from:content( .contentmengalir ke wilayah bernama content)

Sekarang sampai pada bagian yang sulit. Kami ingin selalu mengalir konten melalui .header__backgroundkarena itu adalah bagian di mana konten akan menjadi kabur. (menggunakan webkit-filter:blur(10px);)

Hal ini dilakukan dengan transfrom:translateY(-$HeightOfTheHeader)para .contentuntuk memastikan bahwa konten akan selalu mengalir meskipun .header__background. Transformasi ini sambil selalu menyembunyikan beberapa konten di bawah tajuk. Memperbaiki ini mudah ditambahkan

.header__background:before{
  display:inline-block;
  content:'';
  height:$HeightOfTheHEader
}

untuk mengakomodasi transformasi.

Ini sedang bekerja di:

• Chrome 29+ (aktifkan 'fitur-eksperimental-webkit' / 'aktifkan fitur-eksperimental-platform-web')
• Safari 6.1 Seed 6
• iOS7 ( lambat dan tidak ada scrolling )

Ini mungkin dengan FireFox sekarang berkat atribut style elemen .

Atribut eksperimental ini memungkinkan Anda menggunakan konten HTML apa pun sebagai gambar latar. Jadi, untuk membuat latar belakang Anda membutuhkan tiga overlay:

1. Hamparan sederhana dengan latar belakang yang solid (untuk menyembunyikan konten hamparan nyata).
2. Overlay dengan -moz-elementlatar belakang yang mengatur konten. Perhatikan bahwa FX tidak mendukung filter: blur()atribut, jadi kami perlu SVG.
3. Hamparan dengan konten yang tidak buram.

Jadi, kumpulkan:

SVG blur filter (berfungsi di FX, peramban lain dapat menggunakan filter:blur()):

<svg>
  <defs>
    <filter id="svgBlur">
      <feGaussianBlur stdDeviation="10"/>
    </filter>
  </defs>
</svg>

CSS blur style:

.behind-blur 
{
    filter         : url(#svgBlur); 
    opacity: .4;
    background: -moz-element(#content);
    background-repeat: no-repeat;
}

Akhirnya 3 lapisan:

<div class="header" style="background-color: #fff">&nbsp;</div>
<div class="header behind-blur">&nbsp;</div>
<div class="header">
    Header Text, content blurs behind
</div>

Kemudian untuk memindahkan ini sekitar hanya mengatur background-position(sampel dalam jQuery tetapi Anda bisa menggunakan apa saja):

$('.behind-blur').css({
    'background-position': '-' + left + 'px -' + top + 'px'
}); 

Ini dia sebagai JS Fiddle, hanya FX.

Lihat halaman demo ini.
Demo ini menggunakan html2canvas untuk merender dokumen sebagai gambar.

http://blurpopup.labs.daum.net/

1. Ketika tautan "Tampilkan popup" diklik, fungsi 'makePopup' dipanggil.
2. 'makePopup' menjalankan html2canvas untuk merender dokumen sebagai gambar.
3. Gambar dikonversi ke string data-url dan dilukis sebagai gambar latar popup.
4. Popup bg dikaburkan oleh -webkit-filter: blur
5. Tambahkan popup ke dalam dokumen.
6. Saat Anda menyeret popup, ia mengubah posisi latar belakangnya sendiri.

Pena ini yang saya temukan tempo hari sepertinya melakukannya dengan indah, hanya sedikit css dan 21 baris javascript. Saya belum pernah mendengar tentang perintah cloneNode js sampai saya menemukan ini, tetapi itu benar-benar bekerja untuk apa yang saya butuhkan pasti.

http://codepen.io/rikschennink/pen/zvcgx

Detail: A. Pada dasarnya ia melihat div konten Anda dan memanggil cloneNode di atasnya sehingga membuat duplikat yang kemudian ditempatkan di dalam overflow: objek header tersembunyi yang duduk di atas halaman. B. Kemudian hanya mendengarkan untuk menggulir sehingga kedua gambar tampak cocok dan mengaburkan gambar header ... annnnd BAM. Efek tercapai.

Tidak benar-benar sepenuhnya bisa dilakukan di CSS sampai mereka mendapatkan sedikit scriptability dibangun ke dalam bahasa.

• mengkloning elemen yang ingin Anda blur
• tambahkan ke elemen yang Anda inginkan di bagian atas (jendela buram)
• mengaburkan elemen yang dikloning dengan filter webkit
• pastikan elemen yang dikloning diposisikan absolut
• saat menggulir induk elemen asli, tangkap scrollTop dan scrollLeft
• menggunakan requestAnimationFrame, sekarang atur transformasi webkit secara dinamis ke translate3d dengan nilai x dan y untuk scrollTop dan scrollLeft

Contohnya ada di sini:

• pastikan untuk membuka di webkit-browser
• gulir di dalam tampilan telepon (terbaik dengan mouse apel ...)
• lihat footer kabur dalam aksi

http://versie1.com/TEST/ios7/

membuat demo cepat kemarin yang benar-benar melakukan apa yang Anda bicarakan. http://bit.ly/10clOM9 demo ini melakukan paralaks berdasarkan pada accelerometer sehingga berfungsi terbaik pada iPhone itu sendiri. Saya pada dasarnya hanya menyalin konten yang kita overlay ke elemen posisi tetap yang menjadi kabur.

Catatan: geser ke atas untuk melihat panel.

(Saya menggunakan id css mengerikan tetapi Anda mendapatkan ide)

#frost{
 position: fixed; 
 bottom: 0; 
 left:0; 
 width: 100%; 
 height: 100px; 
 overflow: hidden;
 -webkit-transition: all .5s;
}
#background2{
 -webkit-filter: blur(15px) brightness(.2);
}

#content2fixed{
 position: fixed;
 bottom: 9px;
 left: 9px;
 -webkit-filter: blur(10px);
}

Tidak begitu yakin tentang itu, saya percaya bahwa CSS tidak mampu melakukan ini saat ini

Namun Chris Coyier telah membuat blog tentang teknik lama dengan banyak gambar untuk mencapai efek seperti itu, http://css-tricks.com/blurry-background-effect/

Lihat yang ini http://codepen.io/GianlucaGuarini/pen/Hzrhf Sepertinya itu berpengaruh tanpa duplikasi gambar latar belakang elemen di bawahnya. Lihat teks kabur juga dalam contoh.

Tidak jelas

var vague = $blurred.find('iframe').Vague({
  intensity:5 //blur intensity
});
vague.blur();

Kabar baik

Mulai hari ini 11 April 2020 , ini mudah dilakukan dengan backdrop-filterproperti CSS yang sekarang menjadi fitur stabil di Chrome, Safari & Edge.

Saya menginginkan ini di aplikasi seluler Hybrid kami sehingga juga tersedia di Android / Chrome Webview & Safari WebView.

1. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
2. https://caniuse.com/#search=backdrop-filter

Contoh Kode:

Cukup tambahkan properti CSS:

.my-class {
    backdrop-filter: blur(30px);
    background: transparent;     // Make sure there is not backgorund
}

Contoh UI 1

Lihat itu berfungsi di pena ini atau coba demo:

#main-wrapper {
  width: 300px;
  height: 300px;
  background: url("https://i.picsum.photos/id/1001/500/500.jpg") no-repeat center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.my-effect {
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  transition: top 700ms;
}

#main-wrapper:hover .my-effect {
  top: 0;
}

<h4>Hover over the image to see the effect</h4>

<div id="main-wrapper">
  <div class="my-effect">
    Glossy effect worked!
  </div>
</div>

Contoh UI 2

Mari kita ambil contoh aplikasi McDonald's karena ini cukup berwarna. Saya mengambil tangkapan layarnya dan menambahkan sebagai latar belakang di bodyaplikasi saya.

Saya ingin menunjukkan teks di atasnya dengan efek glossy. Menggunakan backdrop-filter: blur(20px);pada overlay di atasnya, saya dapat melihat ini: 😍

Saya telah menggunakan svg filter untuk mencapai efek yang sama untuk sprite

<svg id="gray_calendar" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 48 48 48">
  <filter id="greyscale">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
  <image width="48" height="10224" xlink:href="tango48i.png" filter="url(#greyscale)"/>
</svg>

• Atribut viewBox akan memilih hanya bagian dari gambar Anda termasuk yang Anda inginkan.
• Ubah saja filter ke apa pun yang Anda inginkan, seperti <feGaussianBlur stdDeviation="10"/>contoh Keith .
• Menggunakan <image ...> tag untuk menerapkannya pada gambar apa pun atau bahkan menggunakan beberapa gambar.
• Anda dapat membangun ini dengan js dan menggunakannya sebagai gambar atau menggunakan id di css Anda.

Ini mungkin bisa membantu Anda !!

Ini secara dinamis mengubah latar belakang seperti yang dilakukan iOS

.myBox {
  width: 750px;
  height: 500px;
  border: rgba(0, 0, 0, 0.5) 1px solid;
  background-color: #ffffff;
}

.blurBg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.blurBg img {
  -webkit-filter: blur(50px);
  margin-top: -150px;
  margin-left: -150px;
  width: 150%;
  opacity: 0.6;
}

Inilah pendapat saya tentang ini dengan jQuery. Solusi tidak universal, artinya seseorang harus mengubah beberapa posisi dan hal-hal tergantung pada desain yang sebenarnya.

Pada dasarnya apa yang saya lakukan adalah: pada pemicu klon / hapus seluruh latar belakang (apa yang harus dikaburkan) ke wadah dengan konten yang tidak dikaburkan (yang, secara opsional, telah menyembunyikan overflow jika tidak lebar penuh) dan posisikan dengan benar. Peringatan adalah bahwa pada jendela ukuran div buram akan tidak cocok dengan yang asli dalam hal posisi, tetapi ini bisa diselesaikan dengan beberapa fungsi mengubah ukuran jendela (jujur ​​saya tidak bisa diganggu dengan itu sekarang).

Saya akan sangat menghargai pendapat Anda tentang solusi ini!

Terima kasih

Ini biola , tidak diuji di IE.

HTML

<div class="slide-up">
<div class="slide-wrapper">
    <div class="slide-background"></div>
    <div class="blured"></div>
    <div class="slide-content">
         <h2>Pop up title</h2>

        <p>Pretty neat!</p>
    </div>
</div>
</div>
<div class="wrapper">
<div class="content">
     <h1>Some title</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie magna elit, quis pulvinar lectus gravida sit amet. Phasellus lacinia massa et metus blandit fermentum. Cras euismod gravida scelerisque. Fusce molestie ligula diam, non porta ipsum faucibus sed. Nam interdum dui at fringilla laoreet. Donec sit amet est eu eros suscipit commodo eget vitae velit.</p>
</div> <a class="trigger" href="#">trigger slide</a>

</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
    <feGaussianBlur stdDeviation="3" />
</filter>
</svg>

CSS

body {
margin: 0;
padding: 0;
font-family:'Verdana', sans-serif;
color: #fff;
}
.wrapper {
position: relative;
height: 100%;
overflow: hidden;
z-index: 100;
background: #CD535B;
}
img {
width: 100%;
height: auto;
}
.blured {
top: 0;
height: 0;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: url(#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
position: absolute;
z-index: 1000;
}
.blured .wrapper {
position: absolute;
width: inherit;
}
.content {
width: 300px;
margin: 0 auto;
}
.slide-up {
top:10px;
position: absolute;
width: 100%;
z-index: 2000;
display: none;
height: auto;
overflow: hidden;
}
.slide-wrapper {
width: 200px;
margin: 0 auto;
position: relative;
border: 1px solid #fff;
overflow: hidden;
}
.slide-content {
z-index: 2222;
position: relative;
text-align: center;
color: #333333;
}
.slide-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 1500;
opacity: 0.5;
}

jQuery

// first just grab some pixels we will use to correctly position the blured element
var height = $('.slide-up').outerHeight();
var slide_top = parseInt($('.slide-up').css('top'), 10);
$wrapper_width = $('body > .wrapper').css("width");
$('.blured').css("width", $wrapper_width);

$('.trigger').click(function () {
    if ($(this).hasClass('triggered')) { // sliding up
        $('.blured').animate({
            height: '0px',
            background: background
        }, 1000, function () {
            $('.blured .wrapper').remove();
        });
        $('.slide-up').slideUp(700);
        $(this).removeClass('triggered');
    } else { // sliding down
        $('.wrapper').clone().appendTo('.blured');
        $('.slide-up').slideDown(1000);
        $offset = $('.slide-wrapper').offset();
        $('.blured').animate({
            height: $offset.top + height + slide_top + 'px'
        }, 700);
        $('.blured .wrapper').animate({
            left: -$offset.left,
            top: -$offset.top
        }, 100);
        $(this).addClass('triggered');
    }
});