Bir arama sayfası için arka plan görüntüsü olarak kullandığım bir JPEG dosyası var ve Backbone.js bağlamlarında çalıştığım için ayarlamak için CSS kullanıyorum :

background-image: url("whatever.jpg");

Sadece arka plana bir CSS 3 bulanıklık filtresi uygulamak istiyorum , ama sadece bir eleman nasıl stil emin değilim. Eğer denersem:

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

CSS'imin hemen altında background-image, sadece arka plan yerine tüm sayfayı stilize ediyor. Yalnızca görüntüyü seçmenin ve filtreyi buna uygulamanın bir yolu var mı? Alternatif olarak, sayfadaki diğer her öğe için bulanıklığı kapatmanın bir yolu var mı?

Bu kalemi kontrol et .

Biri arka plan görüntüsü ve diğeri içeriğiniz için olmak üzere iki farklı kap kullanmanız gerekir.

Örnekte, iki kap oluşturdum .background-imageve .content.

İkisi birlikte yerleştirilir position: fixedve left: 0; right: 0;. Bunları gösterme z-indexfarkı, öğeler için farklı ayarlanmış değerlerden gelir .

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
    rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
    quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
    tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

Lorem Ipsum Metni için özür dileriz .

Güncelleme

Http://codepen.io/akademy/pen/FlkzB kullanarak daha iyi bir uygulama için Matthew Wilcoxson'a teşekkürler.content:before

dolma kalem

İçeriğin diğer çözümler gibi sabit / mutlak olmak yerine belge akışına sığdırılmasıyla birlikte fazladan bir öğeye olan ihtiyacı ortadan kaldırmak.

Kullanarak elde

.content {
  overflow: auto;
  position: relative;
}

Otomatik taşma gerekir, aksi takdirde arka plan üstteki birkaç piksel ile dengelenir.

Bundan sonra ihtiyacın var

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

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

DÜZENLE Kenarlardaki beyaz kenarlıkları kaldırmakla ilgileniyorsanız, genişliği ve yüksekliği ile 110%sol ve üstünü kullanın -5%. Bu, arka planlarınızı biraz genişletir - ancak kenarlardan düz renk kanaması olmamalıdır.

Güncellenmiş Kalem burada: https://codepen.io/anon/pen/QgyewB - Öneri için teşekkürler Chad Fawcett.

Diğer cevaplarda belirtildiği gibi, bu aşağıdakilerle gerçekleştirilebilir:

• Arka plan olarak bulanık görüntünün bir kopyası.
• Filtrelenebilen ve ardından içeriğin arkasına yerleştirilebilen bir sözde öğe.

Ayrıca kullanabilirsiniz backdrop-filter

Adında desteklenen bir özellik var backdrop-filterve şu anda Chrome 76, Edge , Safari ve iOS Safari'de destekleniyor ( istatistikler için caniuse.com adresine bakın ).

Gönderen Mozilla devdocs :

Zemin filtresi özelliği, bir öğenin arkasındaki alanı bulanıklaştırma veya renk değiştirme gibi efektler sağlar; bu daha sonra öğenin saydamlığını / opaklığını ayarlayarak o öğeden görülebilir.

Kullanım istatistikleri için caniuse.com adresine bakın .

Şöyle kullanırsınız:

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

<div class="background background-filter"></div>

Güncelleme (12/06/2019) : Chromium, 30/07/2019 tarihlibackdrop-filter 76 sürümünde varsayılan olarak etkinleştirilmiş olarak gönderilecektir .

Güncelleme (01/06/2019) : Mozzilla Firefox ekibi bunun yakında uygulanmaya başlayacağını duyurdu .

Güncelleme (21/05/2019) : Yeni duyurulan Chromium backdrop-filter, "Deneysel Web Platformu Özelliklerini Etkinleştir" işaretini etkinleştirmeden krom kanarya'da kullanılabilir. Bu backdrop-filter, tüm krom platformlarında uygulanmaya çok yakın olduğu anlamına gelir .

Bunu yapmak için HTML'nizi yeniden yapılandırmanız gerekir . Arka planı bulanıklaştırmak için tüm öğeyi bulanıklaştırmanız gerekir. Bu yüzden sadece arka planı bulanıklaştırmak istiyorsanız, kendi öğesi olmalıdır.

Lütfen aşağıdaki kodu kontrol edin: -

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);	
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}

<div class="backgroundImageCVR">
    <div class="background-image"></div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
      <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
    </div>
</div>

Aşağıdaki, Matthew Wilcoxson'un çözümü gibi, 'önce' sahte bir öğeye sahip saf CSS'deki modern tarayıcılar için basit bir çözümdür.

JavaScript'teki görüntüyü ve diğer nitelikleri değiştirmek için sözde öğeye erişme ihtiyacını önlemek için inherit, değer olarak kullanın ve üst öğe (burada body) aracılığıyla bunlara erişin .

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

CSS'deki .contentsekmede olarak değiştirin position:absolute. Aksi takdirde, oluşturulan sayfa kaydırılamaz.

Bahsedilen tüm çözümler çok akıllı olsa da, hepsinin denediğimde sayfadaki diğer öğelerle ilgili küçük sorunları veya potansiyel vuruşları olduğu görülüyordu.

Zamandan kazanmak için eski çözümüme geri döndüm: Paint.NET'i kullandım ve 5-10 piksel yarıçaplı Efektler, Gauss Bulanıklığı'na gittim ve bunu sayfa görüntüsü olarak kaydettim. :-)

HTML:

<body class="mainbody">
</body

CSS:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

DÜZENLE:

Sonunda işe koyuldum, ama çözüm kesinlikle basit değil! Buraya bakın:

• filtre: bulanıklaştırma (1 piksel); firefox, IE ve opera'da çalışmaz

Tek ihtiyacınız olan şey "filtre" dir:

blur(«WhatEverYouWantInPixels»);"

body {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

#background {
    background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    /* START */
    /* START */
    /* START */
    /* START */

    /* You can adjust the blur-radius as you'd like */
    filter: blur(3px);
}

<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

Tabii ki, bu bir CSS çözümü değil, ancak CDN Proton'u aşağıdakilerle kullanabilirsiniz filter:

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

Bu dan https://developer.wordpress.com/docs/photon/api/#filter

Bunu yazmadım, ancak backdrop-filterCSS SASS derleyicisini kullanarak kısmen desteklenen bir çoklu dolgu olduğunu fark ettim , bu yüzden bir derleme boru hattınız varsa güzel bir şekilde elde edilebilir (ayrıca TypeScript kullanır):

https://codepen.io/mixal_bl4/pen/EwPMWo

Bu cevap Malzeme Tasarımı içindir dinamik yüksekliğe ve bir resme sahip yatay kart düzeni içindir.

Kartın dinamik yüksekliği nedeniyle görüntünün bozulmasını önlemek için, yükseklikteki değişiklikleri ayarlamak üzere bulanıklaştırılmış bir arka plan yer tutucu görüntüsü kullanabilirsiniz.

açıklama

• Kart, bir flexbox olan bir <div>sınıf sarmalayıcıda bulunur.
• Kart iki öğeden oluşur: aynı zamanda bir bağlantı olan bir görüntü ve içerik.
• Link <a>, class link , göreceli olarak konumlandırılmıştır .
• Bağlantı iki alt öğeden oluşur: bir yer tutucu <div>sınıf bulanıklığı ve net görüntü olan bir <img>sınıf resmi .
• Her ikisi de mutlak konumlandırılmıştır ve vardır width: 100%, ancak sınıf pic daha yüksek bir yığın sırasına sahiptir, yani,z-index: 2 yer tutucunun üzerine yerleştirir.
• Bulanık yer tutucunun arka plan resmi , HTML'deki satır içi stil aracılığıyla ayarlanır .

kod

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}

<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>

Şimdi bu, CSS GRID kullanarak daha da basit ve daha esnek hale geliyor.Yapılı arka planı (imgbg) metinle (h2)

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

ve css:

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

Sözde sınıfı kullanmadan gelen

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}

<body></body>

İçeriğin kaydırılabilir olmasını istiyorsanız, içeriğin konumunu mutlak olarak ayarlayın:

content {
   position: absolute;
   ...
}

Bunun sadece benim için olup olmadığını bilmiyorum, ama değilse bu düzeltme!

Ayrıca arka plan sabit olduğu için, bir "paralaks" etkisi olduğu anlamına gelir ! Şimdi, bu kişi sadece bulanık bir arka plan yapmayı öğretmekle kalmadı, aynı zamanda paralaks arka plan efekti!