Möchten Sie lernen, wie Sie Seiten mit einem originellen und lebendigen modernen Design erstellen? Die Verwendung von durchscheinenden Elementen kann Ihnen bei der Lösung dieser schwierigen Aufgabe helfen. Heute werden wir uns die wichtigsten praktischen Möglichkeiten ansehen, um die Transparenz von Strukturelementen festzulegen.

Wie stelle ich Transparenz ein?

Wenn wir dieses Thema durch das Prisma der historischen Entwicklung von Webtechnologien betrachten, können die folgenden Ansätze unterschieden werden:

• Eigentum opazität.
• Verwenden von PNG -Bilder
• Systemformat RGBA
• Und schließlich die Antike oder karierte Bilder.

CSS-Eigenschaft Deckkraft

Styling-Anwendung CSSeigenschaften opazität Mit dieser Option können Sie die Transparenz des Elements festlegen, auf das es angewendet wird. Die Werte, die als Argument verwendet werden können, reichen von 0 bis 1.
Schauen wir uns ein Beispiel an.

< html> < head> < title> TODO liefert einen Titel < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " > Es wird viel von Ihrem Text geben

/ * Hintergrund für den Hauptteil der Seite * / ). prozrachen (Polsterung: 10px; / * Einrückung für Text * / Hintergrund: darkturquoise; / * Hintergrundfarbe einstellen * / Rand: 0 Auto; / * Block zentrieren * / Breite: 50%; / * Blockbreite einstellen * / Opazität: 0,7; / * Transparenz einstellen * / Schriftart: 48px / 64px Times New Roman; Textausrichtung: begründen; )

Als Ergebnis haben wir einen durchscheinenden Block erhalten:

Wichtig!!!

1. Opazitätnimmt Werte aus dem Bereich: 0 (volle Transparenz) - 1 (undurchsichtig).
2. Browserübergreifende Kompatibilität. BEIM IE bis zur siebten Version inklusive Opazitätnicht unterstützt. Die folgende Zeile hilft dabei, die gleiche Anzeige eines Elements zu erzielen:

   filter: Alpha (Deckkraft \u003d 70);

   Es sollte berücksichtigt werden, dass die Eigenschaft filterabwesend in htmlspezifikationen, ändert Werte von 1 auf 100 und kann nur auf Elemente angewendet werden:

   • mit absoluter Positionierung ( position: absolut)
   • mit einer festen linearen Abmessung ( höhe oder Breite).
3. Der Grad der Transparenz wird von Kindern geerbt, wodurch das Kind transparenter, aber nicht weniger gemacht werden kann. Dh auf einem durchscheinenden Hintergrund keinen CLEAR-Text erstellen.

Um das Material des letzten Absatzes besser zu verstehen, setzen Sie den Text im vorherigen Beispiel auf Weiß.

farbe weiß;

und betrachten Sie es unter einem Mikroskop:

Wie Sie sehen, ist auch der Inhalt unseres Blocks (Text) durchscheinend geworden. Was aber, wenn Sie in der Praxis nicht an der Transparenz des Inhalts interessiert sind, sondern nur an der Transparenz des Hintergrunds? In diesem Fall fahren Sie mit dem nächsten Punkt fort.

Verwenden von PNG-Bildern

Ein interessantes Merkmal des Formats PNGist, dass es 256 Transparenzstufen hat. Ich denke, Sie haben den Gedankengang erfasst und wahrscheinlich bereits einen Algorithmus für diesen Ansatz entwickelt. Ich muss es nur aussprechen.

Als Ergebnis haben wir einen Block mit transparentem Hintergrund und undurchsichtigem Inhalt erhalten:

Wichtig!!!

1. Im Gegensatz zu Eigentum opazitättransparenz wird nur für den Hintergrund eingestellt
2. Browserübergreifende Kompatibilität. Funktioniert in fast allen Browsern und das ist ein Plus. Aber Transparenz PNGwird in nicht unterstützt IE6... Wenn Sie Ihre Site für eine solche Antike optimieren, müssen Sie andere Methoden oder Skripte verwenden.
3. Wenn Sie die Anzeige von Bildern ausschalten, verschwindet Ihr Hintergrund (berücksichtigen Sie diesen Punkt bei der Optimierung der Anzeige auf Mobilgeräten, da nicht immer unbegrenztes Internet zur Verfügung steht).
4. Um die Farbe und / oder Transparenz zu ändern, müssen Sie ein neues Bild erstellen und auf den Server hochladen.

RGBA-Systemformat

Eine der modernsten Methoden zur Änderung der Hintergrundtransparenz ist die Verwendung des Systems RGBA.

RGBA- Farbdarstellungssystem mit drei Standardkanälen RGB(rot, grün, blau) und der vierte, der sogenannte Alpha-Kanal, der den Grad der Transparenz kennzeichnet.

hintergrund: rgba (r, g, b, a);

Ersetzen Sie in dem bereits bekannten Beispiel den Inhalt in CSSdatei zu folgenden:

körper (Hintergrund: URL (./ Vaden-Pro-Logo. PNG); / * Hintergrund * / ). prozrachen (Polsterung: 10px; Hintergrund: rgba (0, 206, 209, 0,7); Rand: 0 auto; Breite: 50%; Schriftart: 48px / 64px Times New Roman; Farbe: weiß; Textausrichtung: rechtfertigen;)

Wichtig!!!

1. Im Gegensatz zu Eigentum opazitättransparenz wird nur für den Hintergrund eingestellt
2. Im Gegensatz zur Methode PNGbilder, um die Farbe oder den Grad der Transparenz zu ändern, müssen wir nur die Werte ändern rgba.
3. Browserübergreifende Kompatibilität. Funktioniert in allen modernen Browsern (beginnend mit IE9, Op10, Fx3,Sf3.2Bei älteren Browsern müssen Sie entweder auf Transparenz verzichten oder diese verwenden opazität, png Methoden.

Karierte Bilder oder Respekt vor der Geschichte

Diese Methode war der Ursprung des Webdesigns, und ich sah alte Browser, die wirklich nicht wussten, wie man etwas macht. Es besteht darin, einen karierten Hintergrund zu erstellen, in dem sich farbige Quadrate mit transparenten abwechseln.

Als Ergebnis der Anwendung eines solchen Bildes wurde ein pseudotransparenter Hintergrund als Hintergrund erhalten.

Wichtig!!!

1. Wenn Sie Text vor einem solchen Hintergrund anzeigen, können die Augen schnell müde werden (insbesondere die Wellen beim Scrollen drücken Sie nach unten).
2. In anderer Hinsicht ähneln die Anwendungsmerkmale der PNG-Bildmethode.

Fassen wir zusammen?

• Unter dem transparenten Block sollte sich ein helles, nicht eintöniges Bild befinden. Auf einem einfachen Hintergrund geht die Transparenz verloren.
• Lassen Sie sich bei der Auswahl eines bestimmten praktischen Ansatzes von den Browsern leiten, die Ihre Zielgruppe verwendet. Die Cross-Browser-Kompatibilität ist wichtig.

In dieser Lektion werden wir solche analysieren CSS Eigenschaften - opazität und RGBA... Eigentum Opazität ist nur für die Transparenz der Elemente und die Funktion verantwortlich RGBA - für Farbe und Transparenz, wenn Sie den Transparenzwert des Alphakanals angeben.

CSS-Transparenz Deckkraft

Numerischer Wert für opazität angegeben im Bereich von 0,0 bis 1,0, wobei Null die vollständige Transparenz und Eins im Gegenteil die absolute Opazität ist. Um beispielsweise eine Transparenz von 50% zu erzielen, müssen Sie den Wert auf 0,5 setzen. Es muss bedacht werden, dass opazität erstreckt sich auf alle Kinder des Elternteils. Dies bedeutet, dass der Text auf einem durchscheinenden Hintergrund ebenfalls durchscheinend ist. Und das ist schon ein sehr großer Nachteil, der Text fällt nicht so gut auf.

Auf dem Screenshot sehen Sie deutlich, dass der schwarze Text genauso halbtransparent ist wie der blaue Hintergrund.

Div (
Hintergrund: URL (images / yourimage.jpg); / * Hintergrundbild * /
Breite: 750px;
Höhe: 100px;
Rand: Auto;
}
.Blau (
Hintergrund: # 027av4; / * Halbtransparente Hintergrundfarbe * /
Opazität: 0,3; / * Hintergrundtransluzenzwert * /
Höhe: 70px;
}
h1 (
Polsterung: 6px;
Schriftfamilie: Arial Black;
Schriftgröße: kühner;
Schriftgröße: 50px;
}

CSS-Transparenz im RGBA-Format

Format für die Farbaufnahme RGBAist eine modernere Alternative zu Immobilien opazität. R (rot), G (grün), B (blau) - bedeutet: rot, grün, blau. Der letzte Brief EIN - bezeichnet den Alphakanal, der die Transparenz festlegt. RGBA im Gegensatz zu Opazität betrifft keine Kinder.

Schauen wir uns nun unser Beispiel mit an RGBA... Ersetzen wir diese Zeilen in Stilen.

Hintergrund: ## 027av4; /* Hintergrundfarbe */
Opazität: 0,3; / * Hintergrundtransluzenzwert * /

zur nächsten Zeile

Hintergrund: rgba (2, 127, 212, 0,3);

Wie Sie sehen, ist der Transparenzwert von 0,3 für beide Methoden gleich.

Ergebnis des Beispiels mit RGBA:

Der zweite Screenshot sieht viel besser aus als der erste.

Wenn Sie mit der Transluzenz des Hintergrunds der Blöcke spielen, können Sie interessante Effekte auf der Site erzielen. Es ist wichtig, dass diese durchscheinenden Blöcke über ein buntes Design wie ein Foto gehen. Nur in diesem Fall macht sich der Effekt bemerkbar. Diese Technik wird seit langem im Design verwendet, noch bevor sie auftaucht CSS3wurde es rein in Grafikprogrammen implementiert.

Wenn der Kunde möchte, dass das Layout in älteren Browserversionen gut aussieht Internet ExplorerFügen Sie dann die Eigenschaft hinzu filter und vergessen Sie nicht, einen Kommentar abzugeben, damit die Gültigkeit des Codes nicht beeinträchtigt wird.

Ausgabe

Format RGBA Alle modernen Browser werden unterstützt, außer Internet Explorer... Es ist auch sehr wichtig, dass RGBA flexibel, wirkt es nur auf ein bestimmtes Element, ohne Kinder zu beeinflussen. Es ist klar, dass dies für den Layout-Designer bequemer ist. Meine Wahl ist eindeutig zugunsten des Formats RGBA für zu bekommen transparenz in CSS.

Für eine bessere Konsolidierung des Materials und mehr Klarheit empfehle ich Ihnen, durchzugehen.

Mit dem Aufkommen von CSS3 ist die Arbeit von Layout-Designern viel einfacher und logischer geworden: Jetzt können Sie jedes Objekt wirklich flexibel anpassen und JavaScript immer weniger verwenden. Angenommen, Sie müssen die Transparenz des Hintergrunds anpassen - CSS bietet sofort mehrere Optionen.

Der Hintergrund wird durch eine Reihe von Attributen festgelegt (Hintergrundwiederholung, Hintergrundanhang, Hintergrundursprung, Hintergrundclip, Hintergrundfarbe). Jedes dieser Attribute kann separat geschrieben oder unter dem Hintergrundattribut kombiniert werden. Lassen Sie uns jeden von ihnen genauer analysieren.

Hintergrundfarbenattribut

Sogar IE8 unterstützt diese Methode. Mehrere Bilder werden als Hintergründe im fließenden Layout verwendet. Vergessen Sie vor allem nicht, die Hintergrundfarbe in CSS festzulegen, wenn Sie ein Bild verwenden, da Benutzer das Bild möglicherweise einfach nicht laden.

Hintergrundpositionsattribut

Wenn Sie ein Bild verwenden, um den Hintergrund für einen Block festzulegen, können Sie das Bild mit CSS an einer beliebigen Stelle auf dem Bildschirm positionieren. Standardmäßig befindet sich das Bild in der oberen linken Ecke. Das Attribut akzeptiert entweder verbale Angaben (oben, unten, links, rechts) oder numerische Angaben (Prozentsätze, Pixel und andere Einheiten). In diesem Fall müssen Sie zwei Werte angeben: horizontal und vertikal:

body (Hintergrundposition: rechts in der Mitte;) - In diesem Beispiel befindet sich der Hintergrund auf der rechten Seite der Seite mit dem gleichen unteren und oberen Abstand zum Bild.

Attribut für die Hintergrundgröße

Manchmal müssen Sie CSS verwenden, um den Hintergrund zu dehnen oder zu verkleinern. Verwenden Sie dazu das Attribut Hintergrundgröße. Die Hintergrundgröße kann sowohl in Pixel oder Prozent als auch in anderen Maßeinheiten festgelegt werden.

Es gibt einige Probleme mit diesem Attribut: Präfixe müssen verwendet werden, um den Hintergrund in früheren Versionen von Browsern korrekt anzuzeigen. Natürlich unterstützen aktuelle Versionen dieses Attribut vollständig und die Notwendigkeit spezifischer Eigenschaften ist verschwunden.

Attribut "Hintergrundanhang"

Dieses Attribut gibt das Bildlaufverhalten des Hintergrundbilds an. Es können also 3 Werte angenommen werden (mit Ausnahme der Vererbung, die allen in diesem Artikel vorgestellten Attributen gemeinsam ist):

• fest - macht das Bild im Hintergrund bewegungslos;
• scrollen - der Hintergrund rollt zusammen mit anderen Elementen;
• lokal - Das Bild im Hintergrund wird gescrollt, wenn der Inhalt gescrollt ist. Hintergründe, die über den Inhalt hinausgehen, werden erfasst.

Anwendungsbeispiel:

körper (Hintergrundbefestigung behoben).

Firefox unterstützt die letztere Eigenschaft (lokal) derzeit nicht.

Hintergrundursprungsattribut

Dieses Attribut ist für die Positionierung des Elements verantwortlich. Ältere Browser benötigen Präfixe. Die Eigenschaft selbst hat drei Parameter:

• polsterbox positioniert den Hintergrund relativ zur Kante unter Berücksichtigung der Dicke des Rahmens;
• rahmen unterscheidet sich von der vorherigen Eigenschaft dadurch, dass die Grenzlinie den Hintergrund ganz oder teilweise überlappen kann;
• inhaltsfeld Positioniert das Bild, indem es an den Inhalt gebunden wird.

Wenn mehrere Werte angegeben werden, können Browser unterschiedlich reagieren: Firefox und Opera akzeptieren nur die erste Option.

Attribut "Hintergrundwiederholung"

Wenn ein Hintergrund durch ein Bild definiert wird, sollte er sich normalerweise horizontal oder vertikal wiederholen. Hierzu wird das Attribut Hintergrundwiederholung verwendet. Der Hintergrund eines Blocks, dessen CSS eine solche Eigenschaft enthält, kann einen von mehreren Parametern haben:

• keine Wiederholung - Das Bild erscheint in einer einzigen Version auf der Seite.
• wiederholen - Der Hintergrund wird entlang der x- und y-Achse wiederholt.
• wiederhole-x - nur horizontal;
• wiederhole-y - nur vertikal;
• raum - Der Hintergrund wird wiederholt, aber wenn der Raum nicht gefüllt werden kann, erscheinen Hohlräume zwischen den Bildern.
• runden - Das Bild wird skaliert, wenn es nicht möglich ist, den gesamten Bereich mit ganzen Bildern zu füllen.

Ein Beispiel für die Verwendung des Attributs:

körper (Hintergrundwiederholung: keine Wiederholung wiederholen) - ähnlich hintergrundwiederholung: Wiederholung-y.

In CSS3 können Werte für mehrere Bilder festgelegt werden, indem durch Kommas getrennte Parameter aufgelistet werden.

Hintergrund-Clip-Attribut

Dieses Attribut definiert das Verhalten des Hintergrunds unter den Rändern (z. B. bei gestrichelten Rändern):

• polsterbox - Der Hintergrund wird ausschließlich innerhalb des Blocks angezeigt.
• rahmen - das Bild geht unter die Rahmen;
• inhaltsfeld - Das Bild im Hintergrund erscheint nur innerhalb des Inhalts.

Anwendungsbeispiel:

body (Hintergrund-Clip: Inhaltsfeld;).

Chrom und Safari benötigen das Präfix -webkit-.

Die Opazitäts- und Filterattribute

Mit dem Deckkraftattribut können Sie die Transparenz des Hintergrunds festlegen. Die CSS-Eigenschaft funktioniert in allen Browsern. Der Wert liegt im Bereich von 0,0 bis einschließlich 1,0. In diesem Fall können Sie die Transparenz des CSS-Hintergrunds ohne einen ganzzahligen Wert festlegen: Anstelle von 0,3 reicht das Schreiben aus

.block (Hintergrundbild: URL (img.png); Deckkraft: .3;).

Verwenden Sie das Filterattribut, um die Transparenz des Hintergrunds festzulegen, dessen CSS auch für IE unter Version 9 geeignet ist:

.block (Hintergrundbild: URL (img.png); Filter: Alpha (Deckkraft \u003d 30);).

In diesem Fall wird der Opazitätswert im Bereich von 0 bis 100 festgelegt. Beachten Sie, dass sich das Opazitätsattribut von der Opazitätseinstellung mit RGBA in der Vererbung unterscheidet: Bei Verwendung der Opazität wird nicht nur der Hintergrund transparent, sondern alle Elemente innerhalb des Blocks.

Befolgen Sie immer die Statistiken zur Browsernutzung in der GUS und allen anderen Ländern. Das größte Problem für alle Layoutdesigner sind die alten IE-Versionen, die die vollständige Nutzung von CSS3 nicht zulassen. Vergessen Sie beim Codieren nicht, spezielle Dienste zu verwenden, die prüfen, ob Ihr Browser CSS-Eigenschaften unterstützt. Wenn Sie alte Browserversionen nicht installieren können, suchen Sie einen Dienst, der den Betrieb der Website in verschiedenen Browsern online überprüft.

Heute möchte ich über einen transparenten Hintergrund eines Textblocks sprechen, wie man ihn erstellt und was CSS3 dafür bietet. Bevor wir zu rgba und hsla übergehen, schauen wir uns Beispiele für die Verwendung eines halbtransparenten Hintergrunds für einen Block mit Text an, oder vielmehr, wie dies erreicht wird und welche Probleme auftreten. Zur Demonstration werden wir dieses Bild verwenden, das von einem Java-Programm verarbeitet wurde und dessen Link leider lange verloren gegangen ist.

Wir sehen uns das Bild unten an. Es gibt einen grafischen Hintergrund, auf dem Sie einen durchscheinenden Block mit Text überlagern möchten. Idealerweise sollte es das geben, was in der Abbildung unter der Nummer 2 steht, aber manchmal kann das, was unter der Nummer 3 steht, erscheinen. Es gibt noch einen weiteren Defekt, aber ich werde ihn unten ein wenig verbal erwähnen, weil Es gab keine Möglichkeit, einen Screenshot davon zu machen.

Durchscheinender Hintergrund ohne RGBA und Hsla

1. Durchscheinendes PNG ... Die beste Option, weil Es ist bei weitem das browserübergreifendste und einfachste. Damit der Block transparent ist, ist ein halbtransparentes Ein-Pixel-PNG erforderlich, das als Hintergrund des Blocks festgelegt wird. Und alle.
   
   Nachteile: Nur einer ist erforderlich.
2. Transparenz durch Deckkraft ... Die Blocktransparenz wird browserübergreifend wie folgt eingestellt:

   opazität: 0,5;
   filter: Alpha (Deckkraft \u003d 50);
   -Moz-Opazität: 0,5;

   wobei 0,5 und 50 50% Transparenz sind. Aber es gibt ein Problem. Wenn wir den gewünschten Block auf eine solche Transluzenz einstellen, sehen wir diese dritte Option im obigen Bild - der Inhalt des Blocks wird ebenfalls durchscheinend. Es gibt jedoch eine auswegfreie Positionierung, mit deren Hilfe ein weiterer Block unter dem Textblock platziert wird, auf den die Transluzenz eingestellt ist.

   Schauen wir uns ein Beispiel an. Der Block mit dem orangefarbenen Bild sei das Body-Tag. Der Container, der sowohl den Text als auch den transparenten Hintergrund enthält, ist #block_bg, in dem der Block mit dem durchscheinenden Hintergrund #block_transparent und der Block mit dem Text #block_text ist.

   
   

   
   

   Text Text Text, viele, viele Texte

   
   

   körper (Hintergrund: URL (image.jpg);)
   #block_bg (
   Position: relativ;
   Überlauf versteckt;
   Breite: 400px;
   Polsterung: 10px;
   }
   #block_text (Position: relativ; Z-Index: 100;)
   #block_transparent (
   Opazität: 0,5;
   Filter: Alpha (Deckkraft \u003d 50);
   -Moz-Opazität: 0,5;
   Hintergrund: #fff;
   Position: absolut;
   oben: 0;
   links: 0;
   Z-Index: 90;
   Höhe: 5000px;
   Breite: 400px;
   }

   Ich mache Sie darauf aufmerksam, dass die Breite des transparenten Blocks (Zeile 19) festgelegt werden muss, andernfalls wird er in 1 Pixel und die Breite des allgemeinen Blocks (Zeile 5) reduziert, andernfalls geht der Text über den transparenten Block hinaus (obwohl die Breite für den Text festgelegt werden kann, gibt es jedoch keinen grundlegenden Unterschied wird sein). Verwenden Sie zum Einrücken des Texts und der Kante des transparenten Felds die Auffüllung in der sechsten Zeile. Um die Transparenz in der Höhe einstellbar zu machen, geben Sie ihr eine höhere Höhe (Zeile 18) und eine Überlappung für den allgemeinen Block (Zeile 4).
   Also haben wir alles in einen Block gestopft, der in jeden Teil der Seite verschoben werden kann, in dem es einen interessanten Hintergrund gibt. Ja, Sie möchten vielleicht einen Hintergrund für das allgemeine block_bg festlegen, aber es ist besser nicht - machen Sie Ihr Leben schwieriger (abhängig natürlich von der Aufgabe). Mit anderen Worten, es ist besser, diese gesamte Struktur in einen separaten Block zu packen, der gepolstert wird und nicht leidet.
   Nachteile: Zu umständlich.

rgb und hsl, rgba und hsla - CSS3-Eigenschaften

Genauer gesagt sind dies nicht genau Eigenschaften - dies ist eine neue Möglichkeit, Farben für Eigenschaften wie Hintergrund, Farbe, Rahmen usw. festzulegen.

Der Name der Eigenschaften stammt von RGB- (Rot, Grün, Blau) und HSL-Farbsystemen (Farbton, Satutation, Helligkeit). Das erste System beschreibt den Farbraum durch Mischen der Primärfarben Rot, Grün und Blau. Im zweiten System zeigen Farbkomponenten Informationen über eine Farbe in einer für den Menschen bekannteren Form an: Was ist diese Farbe? Wie intensiv ist es? Wie hell oder dunkel ist es?

rgb und rgba

Beginnen wir mit rgb und rgba. Die Werte für r, g, b können von 0 bis 255 oder von 0% bis 100% eingestellt werden. Der a-Wert (Alpha, Transparenz) wird von 0 bis 1 gemessen (Bruchwerte werden durch einen Punkt angegeben - 0,4, 0,7 usw.). Wenn r, g und b auf Werte eingestellt sind, die ihren gültigen Bereich überschreiten (z. B. 300 oder 110% oder -5), werden sie auf den nächsten gültigen Wert verkleinert.

Schauen wir uns als Beispiel die Hintergrundeigenschaft an (obwohl diejenigen, die dies wünschen, Farbe oder Rahmen nehmen können).

hintergrund: rgb (0, 0, 255); / * reines Blau * /
hintergrund: RGB (100%, 50%, 0%); / * reines Blau * /
hintergrund: RGB (10, 145, 500); / * wird als 10, 145, 255 anerkannt * /
hintergrund: rgba (10, 145, 255, 1); / * das gleiche wie vorher * /
hintergrund: rgba (100, 50, 255, 0,1); / * sehr transparenter Fliederfarbton * /

Ja, ich habe vergessen zu sagen, dass Sie kein Leerzeichen zwischen der Eigenschaft und der öffnenden Klammer setzen können und einige Werte nicht in gewöhnlichen Zahlen in einer Zeile und andere in Prozent festlegen können. Wenn Sie dies tun, wird nichts funktionieren.

hsl und hsla

Und ein paar Worte zu hsl und hsla. Der Wert von a wird auf die gleiche Weise wie für rgb und rgba eingestellt, aber bei den ersten drei Parametern ist die Situation etwas anders. h reicht von 0 bis 360 und s und l reichen von 0% bis 100%.

Und das Wichtigste. Wenn es sehr schwierig ist, die Farbe des Kopfes in RGB zu bestimmen (fast immer wird ein Programm eines Drittanbieters mit einer Pipette benötigt), reicht es aus, ein Bild vor den Augen zu haben, damit alles passt. Das Bild zeigt die Schattierungen des Parameters h.

Um die gewünschte Farbe abzuschätzen, wählen Sie einen Farbton aus und schätzen Sie dann s, die Farbsättigung (wobei 0% eine ungesättigte Farbe (Grauton) und 100% die stärkste Sättigung ist) und deren Helligkeit (0% - damit ist die Farbe immer schwarz und mit 100% - weiß). Basierend auf dem Obigen zeigt das Bild die Töne bei 100% Sättigung und 50% Helligkeit.

Jetzt ist der gesamte Farbraum auf einen Blick in Ihrem Kopf. Natürlich ersetzt die manuelle Auswahl keine Pipette, und nicht jeder muss einen "Farbraum" im Kopf haben, aber manchmal passt sie, um schnell herauszufinden, was benötigt und getestet wird.

Und nur ein paar Beispiele

hintergrund: hsl (180, 100%, 50%); / * tiefes Blau * /
hintergrund: hsla (140, 50%, 30%, 0,5); / * durchscheinend, kaum wahrnehmbar, dass der Grünton * /

Nachteile: Alle 4 Eigenschaften werden von Esel und älteren Browsern nicht unterstützt.

Fertigstellung

Im Allgemeinen bietet CSS3 einige andere sehr nützliche Dinge, aber wie immer ist IE die Hauptbremse für den Fortschritt. Für Kundenstandorte würde ich es vorerst nicht verwenden (sie werden das Gehirn immer noch vergeblich ertragen) und die Option mit PNG wählen. Und auf Ihrer Website - warum nicht. Besonders wenn es von fortgeschrittenen Leuten besucht wird, die nicht auf Eseln oder Fragmenten der Antike sitzen.

Sehr oft finden Sie im Internet ein geeignetes Bild, um es beispielsweise in eine Website einzubetten. Oder Sie erstellen eine Collage und müssen einer Zeichnung weitere hinzufügen. Aber die Bilder, die Sie benötigen, haben normalerweise einen Hintergrund.

Lassen Sie uns herausfinden, wie Sie können erstellen Sie mit dem Editor einen transparenten Hintergrund für das BildAdobePhotoshop... Ich habe eine englische Version von Adobe Photoshop CS5 installiert, daher werde ich darauf zeigen.

Ich werde versuchen, Ihnen verschiedene Tastaturkürzel zu geben.

Wenn Sie Photoshop noch nicht installiert haben, es nur selten verwenden oder es auf Englisch ist, können Sie in Paint.net einen transparenten Hintergrund erstellen. Dies ist ein einfacher Bildeditor in russischer Sprache, der wenig Platz auf Ihrer Festplatte beansprucht. Durch Klicken auf den Link können Sie einen ausführlichen Artikel lesen. Sie können Paint.net von unserer Website herunterladen.

Beginnen wir mit einem einfachen Beispiel. Angenommen, Sie haben ein Bild auf einem einfachen Hintergrund, es kann ein Logo oder der Name von etwas sein. Lassen Sie uns dieses Logo oder diese Inschrift in Photoshop auf einem transparenten Hintergrund erstellen.

Öffnen Sie das gewünschte Bild im Editor. Lassen Sie uns nun einen transparenten Hintergrund für die Ebene erstellen. Doppelklicken Sie im Fenster "Ebenen" auf die hinzugefügte Ebene - gegenüber befindet sich eine Sperre. Das Fenster "Neue Ebene" wird geöffnet. Klicken Sie darin auf "OK". Danach verschwindet das Schloss.

Wählen Sie das Werkzeug "Zauberstab". Geben Sie in der Eigenschaftsleiste die Empfindlichkeitsstufe an und geben Sie verschiedene Werte an, um zu verstehen, wie dies funktioniert, z. B. 20 und 100. Um die Auswahl des Bilds aufzuheben, drücken Sie "Strg + D".

Wir stellen die Empfindlichkeit ein und klicken mit einem Zauberstab auf den Hintergrundbereich. Um dem ausgewählten Hintergrund die nicht ausgewählten Teile hinzuzufügen, halten Sie die Umschalttaste gedrückt und setzen Sie die Auswahl fort. Drücken Sie "Löschen", um die ausgewählten Bereiche zu entfernen.

Anstelle des Hintergrunds gibt es jetzt ein Schachbrett - dies bedeutet, dass es uns gelungen ist, den weißen Hintergrund transparent zu machen. Auswahl entfernen - "Strg + D".

Wenn Sie ein Bild oder ein Foto mit vielen verschiedenen Farben und Objekten haben, sollten Sie überlegen, wie Sie in Photoshop einen transparenten Hintergrund für ein Bild erstellen.

In diesem Fall verwenden wir das Schnellauswahl-Tool. Wir klicken mit der linken Maustaste mit einer leichten Verzögerung auf den Zauberstab und wählen das gewünschte Werkzeug aus dem Menü.

Jetzt müssen wir das Objekt auswählen, das auf einem transparenten Hintergrund bleiben soll. Legen Sie in der Eigenschaftsleiste verschiedene Größen fest, klicken Sie auf das Objekt und fügen Sie ihm Bereiche hinzu. Wenn versehentlich ein unnötiger Hintergrund ausgewählt wurde, drücken Sie "Alt" und entfernen Sie ihn.

Drücken Sie "Q", um das Ergebnis anzuzeigen. Die Teile des Bildes, die transparent werden, werden rosa hervorgehoben.

Kopieren Sie die ausgewählten Bereiche durch Drücken von "Strg + C". Erstellen Sie als Nächstes eine neue Datei mit dem Namen "Strg + N" und transparentem Hintergrund.

Fügen Sie die kopierten Fragmente ein, "Strg + V". Wenn noch unerwünschte Hintergrundteile vorhanden sind, entfernen Sie diese mit dem Radiergummi. Speichern Sie Bilder auf transparentem Hintergrund im PNG- oder GIF-Format.

Machen Sie den weißen Hintergrund des Bildes transparent oder machen Sie den Hintergrund für einzelne Fragmente eines Farbbilds oder Fotos in Photoshop transparent. Danach können Sie sie bei Bedarf verwenden: Betten Sie sie in die Site ein, fügen Sie sie einem anderen Bild hinzu oder erstellen Sie interessante Collagen.

CSS-Hintergrundtransparenz

Die Transparenz des Hintergrunds auf der Site wird über eine CSS-Eigenschaft erstellt. Es gibt zwei Möglichkeiten, um Transparenz zu erreichen: über die Opazitätseigenschaft und den Hintergrund: rgba (). Schauen wir uns jeden an und machen dann einen Vergleich.

1. CSS-Deckkraft-Eigenschaft für Hintergrundtransparenz

CSS verfügt über eine Opazitätseigenschaft, mit der Sie die Transparenz von Bildern, Texten und Hintergründen festlegen können.

Die Transparenz wird einfach durch Angabe einer reellen Zahl von 0,0 bis 1,0 festgelegt. Je niedriger die Zahl, desto weniger sichtbar ist das Objekt.

opazität: 0,5; // Transluzenzopazität: 0,2; // Objekt ist nur bei 20% Deckkraft sichtbar: 0,8; // Objekt ist nur bei 80% sichtbar

Schauen wir uns ein Beispiel mit der Opazitätseigenschaft an.

Der Text ist auch transparent