Cum pot face ca un efect de sticlă/blur CSS să funcționeze pentru o suprapunere? (Programare, Html, Css, Blur, Filtre Css)

Chad Johnson a intrebat.

Am probleme în aplicarea unui efect de blur pe un div de suprapunere semi-transparent. Aș vrea ca tot ceea ce se află în spatele div-ului să fie blurat, așa:

Aici este un jsfiddle care nu funcționează: http://jsfiddle.net/u2y2091z/

Aveți vreo idee cum să faceți acest lucru să funcționeze? Aș vrea să păstrez acest lucru cât mai simplu posibil și să fie cross-browser. Aici este CSS-ul pe care îl folosesc:

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

Comentarii

  • Poate să fac div-ul opac, dar să folosesc un pseudo-element cu imaginea ca fundal, care poate fi estompat independent. –  > Por bjb568.
  • @chipChocolate.py Filtrele CSS sunt acceptate în FF35+ în mod implicit. Dar sunt de acord cu tine, noi, în calitate de dezvoltatori, nu ar trebui să ne bazăm pe ele, deoarece nu este o caracteristică cross browser. –  > Por Hashem Qolami.
  • Filtrele CSS sunt acum acceptate în majoritatea browserelor importante. –  > Por Eric Reed.
11 răspunsuri
Jon Catmull

Pentru un răspuns mai simplu și mai actual:

backdrop-filter: blur(6px);

Notă suport pentru browser nu este perfect, dar în majoritatea cazurilor un blur nu ar fi esențial.

Comentarii

  • Acesta este, de departe, cel mai bun răspuns. –  > Por tanner burton.
  • Notă, începând cu 2021-02-01, nicio versiune de Firefox nu acceptă în prezent această funcție. –  > Por KyleFarris.
Weafs.py

Iată un exemplu care utilizează svg filtru.

Ideea este de a utiliza un svg element cu height la fel ca și elementul #overlay și să se aplice feGaussianblur pe acesta. Acest filtru se aplică pe un element svg image element. Pentru a-i conferi un efect de extrudare, ați putea utiliza un element box-shadow în partea de jos a suprapunerii.

Suport pentru browsere pentru svg filtre.

Demonstrație pe Codepen

Chad Johnson

Am reușit să pun cap la cap informații de la toată lumea de aici și de la alte căutări pe Google și am ajuns la următorul lucru care funcționează în Chrome și Firefox: http://jsfiddle.net/xtbmpcsu/. Încă mai lucrez pentru a face acest lucru să funcționeze pentru IE și Opera.

Cheia este să puneți conținutul în interiorul div-ului la care se aplică filtrul:

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

Și apoi CSS-ul:

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

Deci, masca are filtrele aplicate. De asemenea, observați utilizarea url() pentru un filtru cu un <svg> pentru valoare – această idee a venit de la http://codepen.io/AmeliaBR/pen/xGuBr. Dacă se întâmplă să vă minificați CSS-ul, ar putea fi necesar să înlocuiți orice spațiu din marcajul filtrului SVG cu „%20”.

Deci acum, tot ceea ce se află în interiorul div-ului mască este neclar.

Comentarii

  • este atât de inteligent –  > Por Jamaluddin Rumi.
  • Chrome nu-i place finalul filter: url(.... Îndepărtați-o și Chrome folosește cu succes filter: blur(10px);. –  > Por Doug S.
  • Am înțeles greșit? Nu este ceea ce vrea OP. Textele nu trebuie să fie neclare. –  > Por Eric.
  • @Eric, e clar că ai înțeles greșit, deoarece cel care a răspuns la întrebare este OP. –  > Por tao.
Allen Wong
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);

În loc să adăugați un alt fundal neclar la conținutul dvs.,puteți utiliza backdrop-filter. Pentru informarea dvs. este posibil ca IE 11 și Firefox să nu îl suporte. Verificați caniuse.

Demo:

Comentarii

  • Aceeași soluție a fost deja propusă: stackoverflow.com/a/58083568/3702797 –  > Por Kaiido.
  • Există o modalitate de a realiza ceva similar pentru un SVG inline!?  > Por 71GA.
  • @71GA verificați acest lucru sitepoint.com/… –  > Por Allen Wong.
Sampson

Dacă sunteți în căutarea unei abordări cross-browser de încredere astăzi, nu veți găsi una grozavă. Cea mai bună opțiune pe care o aveți este să creați două imagini (acest lucru ar putea fi automatizat în unele medii) și să le aranjați astfel încât una să se suprapună peste cealaltă. Am creat un exemplu simplu mai jos:

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

Deși eficientă, chiar și această abordare nu este neapărat ideală. Acestea fiind spuse, ea produce rezultatul dorit.

Juho Vepsäläinen

Iată o posibilă soluție.

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

Știu că CSS-ul poate fi simplificat și probabil că ar trebui să scăpați de id-uri. Ideea aici este de a folosi un div ca un container de decupare și apoi de a aplica blur pe duplicatul imaginii. Fiddle

Pentru a face acest lucru să funcționeze în Firefox, ar trebui să folosiți SVG hack.

Comentarii

  • @chipChocolate.py Presupun că trebuie să folosiți hack-ul SVG în acest caz atunci, demonsthenes.info/blog/534/Crossbrowser-Image-Blur . –  > Por Juho Vepsäläinen.
  • Rețineți că, pentru filtrul CSS, ați putea omite prefixele furnizorului, altele decât -webkit- deoarece acesta nu este implementat în browserele respective. Este mai bine să puneți declarația standard la sfârșit – după toate versiunile prefixate. –  > Por Hashem Qolami.
  • @HashemQolami Gata. Mulțumesc. –  > Por Juho Vepsäläinen.
  • FF este OK, acum (54.0.1 (32 de biți)). Pur și simplu perfect! Tx! –  > Por Pedro Ferreira.
prajeesh loremine

Magnettoo

Acest lucru va face suprapunerea blurului peste conținut:

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

Hany Gamil

Adus de la backdrop-filter

…aplică efecte grafice, cum ar fi neclaritatea sau schimbarea culorii, în zona din spatele unui element. Deoarece se aplică la tot ceea ce se află în spatele elementului, pentru a vedea efectul trebuie să faceți elementul sau fundalul său cel puțin parțial transparent.

CptGeo

Am găsit această soluție.

Faceți clic pentru a vedea imaginea efectului de neclaritate

Este un fel de truc care folosește un copil absolut poziționat div, îi stabilește imaginea de fundal la fel ca a părintelui div și apoi utilizează background-attachment:fixed proprietate CSS împreună cu aceeași background setate pe elementul părinte.

Apoi se aplică filter:blur(10px) (sau orice altă valoare) pe div-ul copil.

vizualizare pe codepen

Amin

Iată o soluție care funcționează cu fundaluri fixe, dacă ai un fundal fix și ai niște elemente suprapuse și ai nevoie de fundaluri blurate pentru ele, această soluție funcționează:

Imagine avem acest HTML simplu:

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

Un fundal fix pentru <body> sau elementul wrapper:

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

Și aici, de exemplu, avem un element suprapus cu un fundal alb transparent:

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

Acum trebuie să folosim exact aceeași imagine de fundal a învelișului nostru și pentru elementele suprapuse, eu o folosesc ca fundal. :before psuedo-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;
}

Din moment ce fundalul fix funcționează în același mod atât în elementele de tip wrapper, cât și în cele suprapuse, avem fundalul în exact aceeași poziție de defilare a elementului suprapus și îl putem estompa pur și simplu.Iată o soluție de lucru, testată în Firefox, Chrome, Opera și Edge: https://jsfiddle.net/0vL2rc4d/

NOTĂ: În Firefox există o funcție bug care face ca ecranul să pâlpâie la defilare și există fundaluri neclare fixe. dacă există vreo soluție, anunțați-mă