Blur hinzufügen zu fancybox anstelle von schwarz dim

Question

Wir versuchen derzeit, Blur zu einer schicken Box-Overlay mit einem transparenten schwarzen Png als Bild für das Overlay hinzuzufügen.

Ich habe diese CSS3-Regeln noch nicht benutzt, aber ich hoffe, dass jemand das Wissen hat, was benötigt wird.

Bitte schauen Sie sich diesen Link an und klicken Sie auf das Bild und es öffnet sich nun in einer schicken Box. Wir möchten den Hintergrund unscharf machen.

http://develop.ekenhalsan.se/shop/halsokontroller/9-haelsokontroll-a.html

Jede Hilfe total willkommen :)

Answer 1

Dieser Effekt populär als bereift Glas bekannt ist. css-tricks hat ein gutes Beispiel.

https://css-tricks.com/frosting-glass-css-filters/

--Edit--

Got unten für Link gestimmt nur beantworten. So fügte etwas weitere Erklärung

Codepen https://codepen.io/maneesh/pen/oLxOov

HTML

<div class="container is-blur"> 
    <h1>Hello</h1> 
    <p>Background page content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
</div> 

<div class="overlay"> 
    <div class="fancybox"> 
     Your fancy box content 
    </div> 
</div> 

CSS

.container { 
    position: relative; 
} 

.container.is-blur { 
    -webkit-filter: blur(5px); 
    filter: blur(5px); 
} 

.content { 
    font-size: 1.5rem; 
    line-height: 2rem; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: rgba(0,0,0,.5); 
    filter: blur(5px); 
} 

.fancybox { 
    width: 200px; 
    margin: 0 auto; 
    top: 200px; 
    position: relative; 
    background-color: #fff; 
    padding: 30px; 
} 

Sorry über Lorem ipsum.

HINWEIS

css Filter wird von IE noch nicht unterstützt. Kasse http://caniuse.com/#feat=css-filters

fyi: -ms-Filter wird nicht auf IE arbeiten.

Für die weitere Erforschung von Filter, Check-out die MDN docs https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Answer 2

Yep das sind gute Infos - ich habe obwohl einige von ihnen gesehen, und versuchte, sie i Detail aus. Was ist wirklich das Problem ist, die Unschärfe zum Overlay selbst hinzuzufügen - mit ist ein Bild in png mit Transparenz.Nicht wie das Bild hier - wir wollen den Inhalt (Seite) hinter Matt/unscharf) wie auf dem zweiten Bild. Ich nehme an eine andere div Schicht hinter benötigt wird, aber wir wissen nicht, wie dies zu erreichen ..

What we want:)

What we don´t want

Ihren Tag Genießen Sie alle :)