Bir kaplama için CSS camı / bulanıklaştırma efektinin çalışmasını nasıl sağlayabilirim?

110

Yarı saydam bir overlay div üzerine bulanıklık efekti uygulamada sorun yaşıyorum. Div the arkasındaki her şeyin bulanık olmasını istiyorum, şöyle:

SFW resmi

İşte çalışmayan bir jsfiddle: http://jsfiddle.net/u2y2091z/

Bunun nasıl yapılacağına dair bir fikriniz var mı? Bunu olabildiğince karmaşık tutmak ve tarayıcılar arası olmasını istiyorum. İşte kullandığım CSS:

#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);
}
html  css  blur  css-filters 
— Chad Johnson
kaynak
1
Bilginize - CSS filterFirefox'ta desteklenmiyor, onu kullanmamalısınız.
— Weafs.py
2
Belki div'i opak yapabilir, ancak bağımsız olarak bulanıklaştırılabilen arka plan olduğu için görüntüyle sözde bir öğe kullanın.
— bjb568
1
@ chipChocolate.py CSS filtreleri varsayılan olarak FF35 + 'da desteklenir. Ama size katılıyorum, geliştiriciler olarak tarayıcılar arası bir özellik olmadığı için buna güvenmemeliyiz.
— Hashem Qolami
2
— Eric Reed

Yanıtlar:

71

İşte svgfiltre kullanan bir örnek .

Buradaki fikir, svgile heightaynı olan bir öğeyi kullanmak #overlayve feGaussianblurüzerine filtre uygulamaktır . Bu filtre bir svg imageelemana uygulanır . Ekstrüzyon efekti vermek için box-shadow, kaplamanın altında bir kullanabilirsiniz .

svgFiltreler için Tarayıcı Desteği .

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>
Snippet'i genişlet

— Weafs.py
kaynak
51

Buradaki herkesten bilgileri bir araya getirip Google'da daha fazla bilgi toplayabildim ve Chrome ve Firefox'ta çalışan aşağıdakileri buldum: http://jsfiddle.net/xtbmpcsu/ . Hala IE ve Opera için bu işi yapmak için çalışıyorum.

Anahtar, içeriği filtrenin uygulandığı div'in içine yerleştirmektir :

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

Ve sonra 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;
}

Yani maske, filtreleri uyguladı. Ayrıca, <svg>değere ilişkin etiketi olan bir filtre için url () kullanımına dikkat edin - bu fikir http://codepen.io/AmeliaBR/pen/xGuBr'den geldi . CSS'nizi küçültürseniz, SVG filtre işaretlemesindeki boşlukları "% 20" ile değiştirmeniz gerekebilir.

Şimdi, mask div'in içindeki her şey bulanık.

— Chad Johnson
kaynak
sooo akıllı
— Jamaluddin Rumi
3
Chrome finali beğenmiyor filter: url(.... Bunu kaldırın ve Chrome başarıyla kullanır filter: blur(10px);.
— Doug S
2
Yanlış anladım mı? OP'nin istediği bu değil. Metinler bulanık olmamalıdır.
— Eric
2
@Eric, cevaplayıcı OP olduğu için açıkça yanlış anlıyorsunuz .
— tao
10

Bugün güvenilir bir tarayıcılar arası yaklaşım arıyorsanız, harika bir yaklaşım bulamazsınız. Sahip olduğunuz en iyi seçenek, iki görüntü oluşturmak (bu, bazı ortamlarda otomatikleştirilebilir) ve bunları biri diğerini kaplayacak şekilde düzenlemektir. Aşağıda basit bir örnek oluşturdum:

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

Etkili olmasına rağmen, bu yaklaşım bile mutlaka ideal değildir. Olduğu söyleniyor, istenen sonucu veriyor .

görüntü açıklamasını buraya girin

— Sampson
kaynak
8

İşte olası bir çözüm.

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

CSS'nin basitleştirilebileceğini ve muhtemelen kimliklerden kurtulmanız gerektiğini biliyorum. Buradaki fikir, kırpma kabı olarak bir div kullanmak ve ardından görüntünün kopyasına bulanıklık uygulamaktır.Vaktini boşa harcamak

Bunun Firefox'ta çalışması için SVG hack kullanmanız gerekir .

— Juho Vepsäläinen
kaynak
@ chipChocolate.py Sanırım bu durumda SVG hackini kullanmanız gerekiyor, o zaman demosthenes.info/blog/534/Crossbrowser-Image-Blur .
— Juho Vepsäläinen
CSS filtresi için, -webkit-bu tarayıcılarda uygulanmadığından başka satıcı öneklerini çıkarabileceğinizi unutmayın . Tüm önekli sürümlerden sonra standart bildirimi sonuna koymak daha iyidir.
— Hashem Qolami
@HashemQolami Bitti. Teşekkürler.
— Juho Vepsäläinen
FF artık tamam (54.0.1 (32-bit)). Sadece mükemmel! Tx!
— Pedro Ferreira
8 
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);

İçeriğinize başka bir bulanık arka plan eklemek yerine, arka plan filtresini kullanabilirsiniz . FYI IE 11 ve Firefox bunu desteklemeyebilir. Caniuse kontrol et .

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>
Snippet'i genişlet

— Allen Wong
kaynak
Aynı çözüm zaten önerildi: stackoverflow.com/a/58083568/3702797
— Kaiido
Satır içi SVG için benzer bir şey elde etmenin bir yolu var mı?
— 71GA
1
71GA @ Bunu kontrol sitepoint.com/...
— Allen Wong
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>
Snippet'i genişlet

— Prajeesh loremine
kaynak
1

Bu çözümü buldum.

Bulanık efektin görüntüsünü görmek için tıklayın

Kesin olarak konumlandırılmış bir alt öğe kullanan, divarka plan görüntüsünü ana öğeyle aynı ayarlayan divve ardından background-attachment:fixedCSS özelliğini backgroundüst öğede ayarlanan aynı özelliklerle birlikte kullanan bir tür hile .

Ardından filter:blur(10px), alt div öğesine (veya herhangi bir değeri) uygularsınız .

*{
    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>
Snippet'i genişlet

codepen üzerinde görüntüle

— CptGeo
kaynak
1

Bu, içerik üzerinde bulanıklık yerleşimini gerçekleştirir:

.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, 0.5);
}
— Magnettoo
kaynak
0

İşte sabit arka planlarla çalışan bir çözüm, sabit bir arka planınız varsa ve bazı üst üste bindirilmiş öğeleriniz varsa ve bunlar için renkli arka planlara ihtiyacınız varsa, bu çözüm işe yarar:

Resimde bu basit HTML var:

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

<body>Sarmalayıcı öğesi veya için sabit bir arka plan :

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

Ve burada örneğin beyaz şeffaf bir arka plana sahip üst üste yerleştirilmiş bir öğemiz var:

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

Artık kaplama öğelerimiz için de sarmalayıcımızın aynı arka plan görüntüsünü kullanmamız gerekiyor, bunu bir :beforepsuedo sınıfı olarak kullanıyorum:

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

Sabit arkaplan hem sarmalayıcıda hem de üst üste bindirilmiş öğelerde aynı şekilde çalıştığından, arka planı üst üste bindirilmiş öğeyle tam olarak aynı kaydırma konumunda bulunur ve basitçe bulanıklaştırabiliriz. İşte Firefox, Chrome, Opera ve Edge'de test edilmiş çalışan bir keman: https://jsfiddle.net/0vL2rc4d/

NOT: Firefox'ta , kaydırırken ekranın titremesine neden olan bir hata var ve sabit arka planlar bulanık. herhangi bir düzeltme varsa bana bildirin

— Amin
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.