webentwicklung-frage-antwort-db.com.de

Verwischen eines Bildes über CSS?

Bei vielen Smartphones (Samsung Galaxy II als Beispiel) wird beim Durchblättern einer Fotogalerie die verschwommene Kopie im Hintergrund angezeigt. Kann dies von CSS dynamisch erreicht werden (dh ohne dass die Kopie des Fotos im Voraus gespeichert wird)? Gibt es eine Art komplexer CSS-Bildfilter, um ein Bild zu verwischen? 

cssimageeffects
52
user776686

Sie können CSS3-Filter verwenden. Sie sind relativ einfach zu implementieren, werden jedoch derzeit nur vom Webkit unterstützt. Der Browser des Samsung Galaxy 2 sollte jedoch unterstützt werden, da ich denke, dass dies ein Webkit-Browser ist.

43
Andy

Mit CSS3 können wir ein Bild leicht anpassen. Aber denken Sie daran, dies ändert das Bild nicht. Es wird nur das angepasste Bild angezeigt.

Weitere Informationen finden Sie im folgenden Code.

So machen Sie ein Bild grau:

img {
 -webkit-filter: grayscale(100%);
}

So geben Sie einen Sepia-Look:

img {
 -webkit-filter: sepia(100%);
}

So stellen Sie die Helligkeit ein:

img {
 -webkit-filter: brightness(50%);
}

Kontrast einstellen:

img {
 -webkit-filter: contrast(200%);
}

So verwischen Sie ein Bild:

img {
 -webkit-filter: blur(10px);
}

Sie sollten es auch für andere Browser tun. Das beinhaltet alle CSS-Anweisungen

  filter: grayscale(100%);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);

Mehrere verwenden 

 filter: blur(5px) grayscale(1);

Codepen Demo

25
Raj Sharma

Dieser Code funktioniert für alle Browser mit Unschärfeeffekten.

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

Ja, wenn Sie den folgenden Code verwenden, können Sie einen Unschärfeeffekt auf das angegebene Bild anwenden und außerdem den Grad der Unschärfe festlegen. 

img {
  -webkit-filter: blur(10px);
    filter: blur(10px);
}
2
JacobG182

CSS3-Filter funktionieren derzeit nur in Webkit-Browsern (Safari und Chrome). 

0
Aneeshmg
img {
  filter: blur(var(--blur));
}
0
Bar Horing