Ik heb problemen met het toepassen van een vervagingseffect op een semi-transparante overlay-div. Ik zou willen dat alles achter de div vervaagd wordt, zoals dit:
Hier is een jsfiddle die niet werkt: http://jsfiddle.net/u2y2091z/
Enig idee hoe dit te laten werken? Ik wil dit zo ongecompliceerd mogelijk houden en cross-browser hebben. Dit is de CSS die ik gebruik:
#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);
}
Antwoord 1, autoriteit 100%
Voor een eenvoudiger en actueel antwoord:
backdrop-filter: blur(6px);
Opmerking browserondersteuningis niet perfect, maar in de meeste gevallen zou een vervaging niet essentieel.
Antwoord 2, autoriteit 57%
Hier is een voorbeeld dat het filter svggebruikt.
Het idee is om een svg-element te gebruiken met heighthetzelfde als de #overlayen de feGaussianblurtoe te passen erop filteren. Dit filter wordt toegepast op een svgimageelement. Om het een geëxtrudeerd effect te geven, zou je een box-shadowonderaan de overlay kunnen gebruiken.
Browserondersteuning voor svg-filters.
Demo op 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="https://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>Antwoord 3, autoriteit 42%
Ik kon informatie van iedereen hier samenvoegen en verder Googlen, en ik kwam op het volgende dat werkt in Chrome en Firefox: http://jsfiddle.net/xtbmpcsu/. Ik ben er nog steeds mee bezig om dit te laten werken voor IE en Opera.
De sleutel is de inhoud van binnen van de DIV waaraan het filter wordt toegepast:
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;
}<div id="mask">
<p>Lorem ipsum ...</p>
<img src="https://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>Antwoord 4, Autoriteit 12%
background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);
In plaats van een andere wazige achtergrond aan uw inhoud toe te voegen,
U kunt backdrop-filter gebruiken. FYI IE 11 en Firefox ondersteunen het mogelijk niet. Controleer caniuse .
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>Antwoord 5, Autoriteit 9%
Als u op zoek bent naar een betrouwbare cross-browser benadering vandaag , zult u geen grote vinden. De beste optie die u hebt, is om twee afbeeldingen te maken (dit zou in sommige omgevingen kunnen worden geautomatiseerd) en hen zodanig regelen dat men de andere overlaast. Ik heb een eenvoudig voorbeeld ondergaan:
<figure class="js">
<img src="https://i.imgur.com/3oenmve.png" />
<img src="https://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 );
}
Hoewel effectief, zelfs deze benadering is niet noodzakelijk ideaal. Dat wordt gezegd, het levert de gewenst resultaat .
Antwoord 6, Autoriteit 7%
Hier is een mogelijke oplossing.
HTML
<img id="source" src="https://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
<div id="crop">
<img id="overlay" src="https://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;
}
Ik weet dat de CSS kan worden vereenvoudigd en u moet waarschijnlijk van de ID’s afsluiten. Het idee hier is om een div te gebruiken als een bijsnijdcontainer en vervolgens vervaging aan te brengen op duplicaat van de afbeelding. Fiddle
Om dit werk in Firefox te maken, moet u svg hack gebruiken .
Antwoord 7, Autoriteit 3%
#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>Antwoord 8, autoriteit 3%
Hiermee wordt de vervaging over de inhoud aangebracht:
.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);
}
Antwoord 9, autoriteit 3%
Van backdrop-filter
…grafische effecten zoals vervaging of kleurverschuiving toepassen op het gebied
achter een element. Omdat het van toepassing is op alles achter de
element, om het effect te zien moet je het element of de achtergrond ervan maken
ten minste gedeeltelijk transparant.
Antwoord 10
Ik heb deze oplossing bedacht.
Klik om de afbeelding van het wazige effect te bekijken
Het is een soort truc die een absoluut gepositioneerde onderliggende divgebruikt, de achtergrondafbeelding hetzelfde instelt als de bovenliggende diven vervolgens de background-attachment:fixedCSS-eigenschap samen met dezelfde background-eigenschappen die zijn ingesteld op het bovenliggende element.
Vervolgens pas je filter:blur(10px)(of een andere waarde) toe op de onderliggende div.
*{
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>Antwoord 11
Hier is een oplossing die werkt met vaste achtergronden, als je een vaste achtergrond hebt en je hebt een aantal overlay-elementen en je hebt blured achtergronden voor hen nodig, deze oplossing werkt:
Afbeelding We hebben deze eenvoudige HTML:
<body> <!-- or any wrapper -->
<div class="content">Some Texts</div>
</body>
een vaste achtergrond voor <body>of het wrapperelement:
body {
background-image: url(https://placeimg.com/640/360/any);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
En hier bijvoorbeeld hebben we een overlay-element met een witte transparante achtergrond:
.content {
background-color: rgba(255, 255, 255, 0.3);
position: relative;
}
Nu moeten we de exact dezelfde achtergrondafbeelding van onze wrapper voor onze overlay-elementen gebruiken, ik gebruik het als een :beforepsuedo-class:
.content:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
filter: blur(5px);
background-image: url(https://placeimg.com/640/360/any);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Omdat de vaste achtergrond op dezelfde manier werkt in zowel wrapper- als overlay-elementen, hebben we de achtergrond in precies dezelfde schuifpositie als het overlay-element en kunnen we deze eenvoudig vervagen.
Hier is een werkende viool, getest in Firefox, Chrome, Opera en Edge: https://jsfiddle.net/0vL2rc4d/
OPMERKING:In Firefox is er een bugwaardoor het scherm flikkert bij het scrollen en er zijn vaste wazige achtergronden. als er een oplossing is, laat het me weten