CSS3 Unschärfe-Overlay

Ich versuche, Overlay zu erstellen, die ganze Website-Seite abdecken und alles, was dahinter ist, verwischen würde. Ich suchte nach Lösung, probierte mehrere Versionen mit CSS3 Blurfilter, aber ohne Erfolg. Hauptproblem ist, wenn Body-Tag Hintergrund haben, ist es nicht verschwommen.CSS3 Unschärfe-Overlay

Toy Beispiel:

body 
 
{ 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/8/8a/Too-cute-doggone-it-video-playlist.jpg"); 
 
    
 
} 
 

 
h1 
 
{ 
 
    text-align: center; 
 
} 
 

 
#overlay 
 
{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    -webkit-filter: blur(10px); 
 
}

<html> 
 
<head></head> 
 
<body> 
 
    <h1> 
 
    Text 
 
    </h1> 
 
    
 
    <div id="overlay"> 
 
     overlay 
 
    </div> 
 
</body> 
 
</html>

möchte ich versuchen, alles hinter Overlay div zu verwischen. Wenn ich h1 eine Weichzeichnung hinzufüge (oder wenn ich es in ein anderes div-Element einfüge und eine Weichzeichnung auf diesem div hinzufüge), könnte ich fast eine Lösung erreichen, aber ohne Hintergrundunschärfe.

Gibt es eine Lösung, die alle Anforderungen erfüllen kann?

Idee ist, eine JavaScript-Datei zu erstellen, die dies programmatisch tun würde, damit ich auf mehreren Seiten verwenden konnte.

Quelle

2017-06-06 Boris

Also möchten Sie das Hintergrundbild unscharf oder nicht? –

Werfen Sie einen Blick hier: https://gordonlesti.com/css-blu-overlay/ – Gerard

https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to -a-background-image –

Sie können die filter-Eigenschaft mit blur verwenden, obwohl sie nicht allgemein unterstützt wird: http://jsfiddle.net/GkXdM/1/. Es wird in Chrome unterstützt, hat jedoch auf der gesamten Seite eine erhebliche Leistungseinbuße.

body { 
    filter: blur(2px); 
}

Oder Sie können einfach ein div verwenden, die Vollbild ist (wie Sie) und nur die z-index einzustellen. Ich würde jedoch nicht vorschlagen, einen Hintergrund auf den Körper zu legen. Kein Grund dafür.

Quelle

2017-06-06 20:15:03 jdmdevdotnet

Ich habe es versucht, aber es verschwimmt alles, und ich wollte div blenden lassen. – Boris

CSS3 Unschärfe-Overlay

Antwort

Verwandte Themen