Weiß transparent machen. Wie mache ich eine Farbe in Photoshop transparent? Legen Sie die Transparenz für den CSS-Hintergrund fest

In einigen Fällen, beispielsweise beim Entwerfen einer Website, kann es vorkommen, dass der Hintergrund des Bildes in keiner Weise mit der Farbe der Website selbst übereinstimmt. Die naheliegende Lösung besteht darin, diesen Hintergrund transparent zu machen.

Du wirst brauchen

- Adobe Photoshop.

Anweisungen

Öffnen Sie das gewünschte Bild in Adobe Photoshop (Menüpunkt „Datei“ -> „Öffnen“ oder Hotkeys Strg + O). Klicken Sie auf den Menüpunkt „Auswählen“ -> „Farbbereich“. Das Fenster „Farbbereich“ wird angezeigt.

Suchen Sie das Element „Auswählen“. Es befindet sich ganz oben im Fenster. Klick es an. Im sich öffnenden Menü können Sie eine Gruppe von Farben oder Tönen auswählen, die später transparent gemacht werden können. Diese. nur rote Farben, nur Grüntöne, Blautöne oder nur Mitteltöne, Schatten usw. Wenn Sie speziell eine Farbe auswählen müssen, geben Sie in diesem Absatz „Nach Mustern“ an.

Finden Sie den Punkt „Fuzziness“ – mit ihm lässt sich die Palette der ausgewählten Farben erweitern. Nachfolgend finden Sie die Elemente „Ausgewählter Bereich“ und „Bild“. Wenn Sie den ersten auswählen, wird der ausgewählte Bereich im Programmvorschaufenster vorab angezeigt. Im zweiten Fall wird das gesamte Bild angezeigt.

Auf der rechten Seite des Fensters befinden sich drei Schaltflächen mit dem Bild von Pipetten. Auf dem ersten befindet sich einfach eine Pipette, auf dem zweiten eine Pipette mit einem Plus und auf dem dritten eine Pipette mit einem Minus. Klicken Sie auf die erste und klicken Sie im Vorschaufenster oder im Dokument selbst auf die Farbe, die Sie transparent machen möchten. Wählen Sie „Auswahl“, um zu sehen, welche Bereiche des Bildes ausgewählt wurden.

Wenn Sie der ausgewählten Farbe eine weitere Farbe hinzufügen möchten, klicken Sie auf Pipette+ und dann auf diese Farbe. Wenn Sie ihn herunterdrehen, gehen Sie genauso vor, nur mit der „Pipette-“. Nachdem Sie die gewünschte(n) Farbe(n) ausgewählt haben, klicken Sie auf OK. Wie Sie sehen können, wurden die ausgewählten Farben im Dokument hervorgehoben.

Klicken Sie in der Liste der Ebenen (falls diese fehlt, drücken Sie F7) mit der rechten Maustaste auf den Hintergrund, wählen Sie im angezeigten Menü „Aus Hintergrund“ und im nächsten Fenster sofort OK. Der Hintergrund wird zu einer Ebene. Drücken Sie die Entf-Taste auf Ihrer Tastatur. Die ausgewählten Bereiche werden transparent.

Wie stelle ich transparente Farben in CSS ein? Derzeit gibt es drei Möglichkeiten, dies zu tun.

Methode 1 – transparenter Wert

Wenn Sie den Wert der Text- oder Hintergrundfarbe auf transparent setzen, ist die Farbe vollständig transparent, also unsichtbar. Beispiel:

Farbe: transparent;

Ein solcher Text wird auf der Seite nicht sichtbar sein.

Methode 2 – RGBA-Farbmodus

Und das ist eine CSS3-Innovation. Bisher gab es in der Webentwicklung keinen solchen Modus, sondern nur RGB. Sicherlich wissen Sie, wie man Farben in diesem Format aufzeichnet. Dazu müssen Sie in Klammern drei Werte von 0 bis 255 angeben, die die Sättigung einer der drei Grundfarben (Rot, Grün, Blau) angeben. Zum Beispiel:

Hintergrund: rgb(230, 121, 156);

Das RGBA-Format ist nicht anders, es fügt lediglich einen vierten Wert hinzu – den Grad der Transparenz des Elements von 0 bis 1. Im Allgemeinen wird dieses Aufnahmeformat hauptsächlich zum Festlegen einer durchscheinenden Farbe und nicht vollständig transparent verwendet. Um volle Transparenz zu erreichen, müssen Sie lediglich als vierten Wert 0 schreiben.

Hintergrund: rgba(0, 0, 0, 0);

In diesem Fall spielen die restlichen 3 Ziffern keine besondere Rolle.

Eine durchscheinende Farbe kann eingestellt werden, wenn der vierte Parameter auf einen Wert von 0,01 bis 0,99 eingestellt wird. Ich habe bereits ein wenig über die Einstellung der Transluzenz für den Hintergrund in geschrieben, Sie können es bei Interesse lesen.

Methode 3 – Deckkraft

Eine weitere Eigenschaft der CSS3-Technologie. Aber ich möchte Sie gleich warnen, dass es etwas anders funktioniert. Mit der Deckkraft wird die Transparenz auf den gesamten Block eingestellt, auf den sie angewendet wird. Dadurch verschlechtern sich die Lesbarkeit des Textes und die Wahrnehmung von Bildern. Daher sehe ich den Sinn darin, diese Eigenschaft nur für Blöcke zu verwenden, die keinen Text oder andere Informationen enthalten. Es können Werte von 0 bis 1 eingestellt werden, wie es auch beim vierten Parameter bei der Angabe einer Farbe im RGBA-Format der Fall ist.

Im Allgemeinen sind dies im Moment alle mir bekannten Möglichkeiten, eine transparente Farbe in CSS festzulegen. Warum das nötig ist, ist eine andere Frage. Durch einen transparenten Hintergrund ist zu sehen, was sich darunter befindet. Manchmal muss es absichtlich so gemacht werden. Generell ist die Transluzenztechnik heute sehr verbreitet.

Transparenter Hintergrund

Wie Sie vielleicht wissen, ist „Hintergrund“ eine CSS-Eigenschaft, mit der Sie eine Hintergrundfarbe festlegen oder ein Bild laden können, das als Hintergrund fungiert.

Legen Sie die Transparenz für den CSS-Hintergrund fest

Dank eines Farbaufzeichnungsformats wie RGBA ist dies alles ganz einfach möglich. Wenn Sie mit arbeiten Grafikeditoren, dann wissen Sie das wahrscheinlich Farbmodus RGB steht für: den Anteil von Rot (Rot), den Anteil von Grün (Grün) und Blau (Blau). RGBA ist also praktisch gleich, nur ein weiterer Parameter wurde hinzugefügt – Transparenz. Es ist so geschrieben:

Hintergrundfarbe: rgba(173, 57, 22, 0,5)

Zuerst weisen wir explizit darauf hin, dass wir die Farbe im RGBA-Modus einstellen. Anschließend geben wir die Sättigungswerte der drei Primärfarben von 0 bis 255 an, wobei 255 die höchste Sättigung darstellt. Der vierte Parameter ist unsere Transparenz. Hier wird der Wert von 0 bis eins geschrieben. 1 ist ein vollständig undurchsichtiges Element und 0 ist ein vollständig transparentes Element. Wenn Sie den Wert also auf 0 setzen, ist die Hintergrundfarbe überhaupt nicht sichtbar.

Jetzt wissen Sie, wie Sie die Hintergrundeigenschaft in CSS auf Transparenz setzen. Dazu müssen Sie den RGBA-Farbmodus verwenden. Es gibt auch eine Opazitätseigenschaft, die jedoch für das gesamte Element als Ganzes gilt. Das heißt, beim Anwenden von Deckkraft kann Transparenz auf den Text angewendet werden, wodurch er unlesbar wird.

Beispiel für einen transparenten Hintergrund

Die Vorteile eines transluzenten Hintergrunds lassen sich anhand eines Beispiels leicht veranschaulichen. Wir haben zum Beispiel einen allgemeinen Seitenhintergrund. So würde der Block aussehen, wenn er eine einfarbige schwarze Farbe erhalten würde:

Nun legen wir für den Block die gleiche schwarze Farbe fest, geben sie jedoch im RGBA-Farbformat an und geben als letzten Wert beispielsweise 0,7 an. Es wird so ausgehen:

Jetzt ist der Hintergrund des Blocks durch ihn hindurch sichtbar und das Hintergrundbild ist durch ihn hindurch sichtbar. Dieses Bild und der Hintergrund dienen nur als Beispiel. Wie Sie sich vorstellen können, kann Hintergrundtransparenz in CSS nützlich sein, wenn Sie möchten, dass der Hintergrund eines verschachtelten Elements durchscheint, ohne andere Hintergründe auf anderen Ebenen zu verdecken.

Die Einstellung der Farbe selbst mit RGBA ist nicht schwierig. Wie bereits erwähnt, bedeuten die ersten drei Buchstaben die drei Grundfarben Rot, Grün und Blau bzw. deren Anteil (von 0 bis 255). Durch die Einstellung verschiedener Werte können Sie Millionen verschiedener Farben erhalten, und durch die Transluzenz können Sie bei Bedarf viel schönere Effekte für die Site erzielen.

Die Hauptsache ist, das Bild auf Ihrem Computer oder Telefon anzugeben und dann unten auf dieser Seite auf OK zu klicken. Standardmäßig wird der einfache Hintergrund des Bildes durch einen transparenten ersetzt. Die Hintergrundfarbe des Originalbildes wird automatisch ermittelt; Sie müssen lediglich in den Einstellungen angeben, durch welche Farbe es ersetzt werden soll. Der Hauptparameter, der die Qualität der Ersetzung beeinflusst, ist die „Ersetzungsintensität“, die für jedes Bild unterschiedlich sein kann.

Ein Beispiel für ein Foto einer rosa Rose ohne Änderungen und nachdem der schlichte Hintergrund durch transparent, weiß und grün ersetzt wurde:

Erstes Beispiel mit einer Rosenblüte darauf transparenter Hintergrund mit folgenden Einstellungen vorgenommen:
1) Ersatzintensität - 38;
2) Glätten entlang der Kanten – 5;
3) Ersetzen Sie den einfachen Hintergrund durch einen transparenten;
4) Trimmen (<0) или Добавление (>0) an den Rändern - „-70“;
5) Invertieren – deaktiviert (nicht aktiviert).

Zum Gestalten zweites Beispiel Bei einem weißen Hintergrund wurden die gleichen Einstellungen wie im ersten Beispiel verwendet, mit Ausnahme des Parameters: „Einfachen Hintergrund ersetzen durch“ – weiß. IN drittes Beispiel, mit grünem Hintergrund, werden die Einstellungen ebenfalls wie im ersten Beispiel verwendet, bis auf den Parameter: „Farbe im Hex-Format“ - #245a2d.

Das Originalbild wird in keiner Weise verändert. Sie erhalten ein weiteres bearbeitetes Bild mit transparentem oder vorgegebenem Hintergrund.