Ich versuche, eine Art halbtransparentes Unschärfefilterbild zu erstellen, das ich über einigen Hintergründen auf einer Website verwenden kann. Aber Photoshop lässt mich das nicht auf einer leeren Ebene tun. Gibt es eine Umgehung? Oder könnte ich vielleicht auf eine deferente Weise einen ähnlichen Effekt erzielen?
Einfach ausgedrückt, Sie können eine leere Ebene nicht verwischen. Es war noch nie möglich, das zu verwischen, was nicht da ist. Weichzeichnen interagiert mit vorhandenen Pixeln, um einen Dispersionseffekt dieser Pixel zu erzeugen, der zu der Weichzeichnung führt.
Sie könnten Bilder in intelligente Objekte konvertieren und dann intelligente Filter verwenden, um die scharfe Version beizubehalten. Bearbeiten Sie dann einfach den Inhalt des Smart-Objekts, um das Basisbild zu ändern. Aber es gibt keine Möglichkeit, "nur die Unschärfe" ohne ein Bild zu speichern.
Die meisten Websites, die unscharfe Hintergründe verwenden, verwischen entweder das Bild selbst oder wenden Cascading Style Sheet (CSS) -Filter auf das Bild an, sodass das CSS die Unschärfe übernimmt.
Fügen Sie einfach eine Klasse dem Bild hinzu:
<img src="path/to/img.jpg" width="100" height="100" border="0" alt="image" class="blur" />
Erstellen Sie dann die CSS-Regel zum Weichzeichnen:
img.blur {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px); }
Eine Live-Demo können Sie hier sehen: jsFiddle
Beachten Sie, dass dies CSS3 erfordert und mit älteren Browsern nicht funktioniert. Diese Seite behauptet, dass ihre Methode browserübergreifend funktioniert, aber ich habe es selbst nicht ausprobiert.
Und Sie sollten auch beachten, dass CSS-Weichzeichnung die Ladezeit der Seite erheblich beeinträchtigen kann.
Hanna