Transparentes CSS-Bild. Erstellen eines transparenten Hintergrunds in HTML und CSS (Deckkraft und RGBA-Effekte). Wo bekomme ich diese Nummern?

💖 Gefällt es dir? Teilen Sie den Link mit Ihren Freunden
0

Der Effekt der Transluzenz eines Elements ist im Hintergrundbild deutlich sichtbar und hat sich in verschiedenen Bereichen weit verbreitet Betriebssysteme weil es stilvoll und schön aussieht. Im Webdesign kommt auch Transluzenz zum Einsatz und wird durch die Opazitätseigenschaft oder das RGBA-Farbformat erreicht, das für den Hintergrund eingestellt wird.

Opazitätseigenschaft

Das Hauptmerkmal dieser Eigenschaft besteht darin, dass sich der Transparenzwert auf alle darin enthaltenen untergeordneten Elemente auswirkt, nicht nur auf den Hintergrund. Das bedeutet, dass sowohl der Hintergrund als auch der Text durchscheinend werden und Sie die Transparenz nicht durch Hinzufügen von erhöhen können. In der Tabelle Abbildung 1 zeigt das Erscheinungsbild von Text und Hintergrund mit unterschiedlichen Deckkraftwerten.

Beispiel 1 zeigt, wie man mithilfe der Opazität einen halbtransparenten Block erstellt.

Beispiel 1: Hintergrund auf einer Webseite

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Opazität



RGBA

Normalerweise sollte konstruktionsbedingt nur der Hintergrund eines Elements durchscheinend sein und der Text sollte undurchsichtig sein, um die Lesbarkeit zu gewährleisten. Die Opazitätseigenschaft ist hier nicht geeignet, da der Text innerhalb des Elements ebenfalls teilweise transparent ist. Am besten verwenden Sie das RGBA-Format, das über einen Alphakanal, also einen Transparenzwert, verfügt. Der Wert wird rgba geschrieben, dann werden die Werte der roten, blauen und grünen Farbkomponenten in Klammern, durch Kommas getrennt, aufgeführt. Das letzte ist die Transparenz, die von 0 bis 1 eingestellt werden kann (Abb. 1), wobei 0 vollständige Transparenz bedeutet und 1 Deckkraft der Farbe.

Reis. 1. Syntax für die Verwendung von RGBA

Beispiel 2 zeigt die Anwendung RGBA-Format um einen durchscheinenden Hintergrund zu schaffen.

Beispiel 2. Durchscheinender Hintergrund

HTML5 CSS3 IE 9+ Cr Op Sa Fx

rgba

Hobbes war einer der ersten, der dieses Problem aus psychologischer Sicht beleuchtete.


Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 2. Die Hintergrunddeckkraft ist auf 90 % eingestellt.

Reis. 2. Durchscheinender Hintergrund und undurchsichtiger Text

Nicht selten lässt sich im Internet ein passendes Bild finden, um es beispielsweise in eine Website einzufügen. Oder vielleicht erstellen Sie 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 wir das können Erstellen Sie mit dem Editor einen transparenten Hintergrund für ein BildAdobePhotoshop. Ich habe es installiert englische Version Adobe Photoshop CS5, also werde ich es darauf zeigen.

Ich werde versuchen zu geben verschiedene Kombinationen Hotkeys.

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

Schauen wir uns zunächst ein einfaches Beispiel an. Nehmen wir an, Sie haben ein Bild einfacher Hintergrund, es könnte 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 – davor befindet sich ein Vorhängeschloss. Das Fenster „Neue Ebene“ wird geöffnet. Klicken Sie darin auf „OK“. Danach verschwindet die Sperre.

Wählen Sie das Werkzeug „Zauberstab“. Geben Sie in der Eigenschaftenleiste die Empfindlichkeitsstufe an und stellen Sie verschiedene Werte ein, um zu verstehen, wie es funktioniert, zum Beispiel 20 und 100. Um die Auswahl des Bildes aufzuheben, drücken Sie „Strg+D“.

Stellen Sie die Empfindlichkeit ein und klicken Sie mit dem Zauberstab auf den Hintergrundbereich. Um die nicht ausgewählten Teile zum ausgewählten Hintergrund hinzuzufügen, halten Sie die Umschalttaste gedrückt und fahren mit der Auswahl fort. Um ausgewählte Bereiche zu löschen, klicken Sie auf „Löschen“.

Anstelle eines Hintergrunds gibt es jetzt ein Schachbrett – das bedeutet, dass wir es geschafft haben, den weißen Hintergrund transparent zu machen. Auswahl entfernen – „Strg+D“.

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

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

Jetzt müssen wir das Objekt auswählen, das wir auf einem transparenten Hintergrund belassen möchten. Stellen Sie in der Eigenschaftenleiste verschiedene Größen ein und klicken Sie auf das Objekt, um ihm Bereiche hinzuzufügen. Wenn versehentlich ein unnötiger Hintergrund ausgewählt wird, drücken Sie „Alt“ und entfernen Sie ihn.

Um das Ergebnis anzuzeigen, drücken Sie „Q“. Die Teile des Bildes, die transparent werden, werden rosa hervorgehoben.

Kopieren Sie die ausgewählten Bereiche, indem Sie „Strg+C“ drücken. Als nächstes erstellen Sie eine neue Datei, „Strg+N“, mit transparentem Hintergrund.

Fügen Sie die kopierten Fragmente mit „Strg + V“ ein. Wenn noch unnötige Teile des Hintergrunds übrig sind, entfernen Sie diese mit dem Radiergummi-Werkzeug. Wir speichern Bilder, die auf einem transparenten Hintergrund aufgenommen wurden PNG-Format oder GIF.

Machen Sie den weißen Hintergrund des Bildes transparent oder erstellen Sie in Photoshop einen transparenten Hintergrund für einzelne Fragmente eines Farbbildes oder Fotos. Danach können Sie sie bei Bedarf verwenden: Sie können sie in eine Website einfügen, sie zu einer anderen Zeichnung hinzufügen oder interessante Collagen erstellen.

CSS-Hintergrundtransparenz

Die Transparenz des Hintergrunds auf der Site wird durch CSS-Eigenschaften erzeugt. Sie können Transparenz auf zwei Arten erreichen: über die Eigenschaft opacity und background:rgba(). Schauen wir uns jeden von ihnen an und machen dann einen Vergleich.

1. CSS-Opazitätseigenschaft für Hintergrundtransparenz

CSS verfügt über die Eigenschaft opacity, mit der sich die Transparenz von Bildern, Texten, inklusive Hintergründen, einstellen lässt.

Die Transparenz kann einfach durch Angabe eingestellt werden reelle Zahl von 0,0 bis 1,0. Je niedriger die Zahl, desto weniger fällt das Objekt auf.

Deckkraft: 0,5; // Transluzenz-Opazität: 0,2; // Das Objekt ist nur bei 20 % Deckkraft sichtbar: 0,8; // Objekt ist nur zu 80 % sichtbar

Schauen wir uns ein Beispiel mit der Eigenschaft opacity an.

Der Text ist auch transparent



2. Transparenz über die CSS-Eigenschaft „background:rgba()“.

Die zweite Möglichkeit, die Hintergrundtransparenz auf einer Website festzulegen, ist CSS-Eigenschaft Hintergrund:rgba. Schauen wir uns ein Beispiel an

Der Text ist auch transparent



Dieser Code wird auf der Seite wie folgt übersetzt:

Der Unterschied zwischen den beiden Methoden besteht darin, dass der Text innerhalb des Blocks bei Verwendung der Deckkraft transparent wird.

Im zweiten Fall gibt es kein solches Problem. Daher müssen Sie die Situation betrachten – was genau erwarten Sie?

Möchten Sie lernen, wie Sie Seiten mit einem originellen und hellen, modernen Design erstellen? Anwendung des Bodens transparente Elemente kann Ihnen bei der Lösung dieses schwierigen Problems helfen. Heute werden wir uns die wichtigsten praktischen Möglichkeiten ansehen, 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 wir folgende Ansätze unterscheiden:

CSS-Opacity-Eigenschaft

Stil anwenden CSS Eigenschaften Opazität Mit dieser Option können Sie die Transparenz des Elements festlegen, auf das es angewendet wird. Die als Argument verwendbaren Werte liegen zwischen 0 und 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 " >Hier wird ein großer Teil Ihres Textes stehen

/* Hintergrund für den Seitenkörper */). transparent (Auffüllung: 10px; /*Einrückungen für Text*/ Hintergrund: dunkeltürkis; /* Hintergrundfarbe festlegen */ Rand: 0 automatisch; /* Block zentrieren */ Breite: 50 %; /* Breite des Blocks festlegen */ Deckkraft: 0,7; /* Transparenz einstellen */ Schriftart: 48px/ 64px Times New Roman; Text ausrichten: ausrichten; )

Als Ergebnis erhielten wir einen durchscheinenden Block:

Wichtig!!!

  1. Opazität nimmt Werte aus dem Bereich: 0 (volle Transparenz) – 1 (Deckkraft).
  2. Cross-Browser-Kompatibilität. IN I.E. bis einschließlich Version sieben Opazität nicht unterstützt. Die folgende Zeile hilft, die gleiche Anzeige des Elements zu erreichen:

    Filter: alpha(Opacity= 70 ) ;

    Es ist zu berücksichtigen, dass die Immobilie Filter fehlt html Spezifikationen, ändert Werte von 1 bis 100 und kann nur auf Elemente angewendet werden:

    • mit absoluter Positionierung ( Position: absolut)
    • mit einer festen linearen Größe ( Höhe oder Breite).
  3. Der Grad der Transparenz wird von den untergeordneten Elementen und geerbt untergeordnetes Element Sie können die Transparenz erhöhen, aber nicht verringern. Das heißt, Sie können keinen NICHT TRANSPARENTEN Text auf einem durchscheinenden Hintergrund erstellen.

Zum besseren Verständnis des Materials im letzten Absatz setzen wir im vorherigen Beispiel die Textfarbe auf Weiß

Farbe weiß;

und schauen Sie es sich unter dem Mikroskop an:

Wie Sie sehen, ist auch der Inhalt unseres Blocks (Text) durchsichtig geworden. Was aber, wenn es Ihnen in der Praxis nicht um die Transparenz des Inhalts, sondern nur um die Transparenz des Hintergrunds geht? Fahren Sie in diesem Fall mit dem nächsten Punkt fort.

Verwendung von PNG-Bildern

Ein interessantes Merkmal des Formats PNG ist, dass es 256 Transparenzstufen hat. Ich denke, Sie haben den Gedankengang verstanden und wahrscheinlich bereits einen Algorithmus dafür entwickelt, wie dieser Ansatz funktioniert. Ich kann es nur aussprechen.


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

Wichtig!!!

  1. Im Gegensatz zur Immobilie Opazität Die Transparenz wird nur für den Hintergrund eingestellt
  2. Cross-Browser-Kompatibilität. Funktioniert in fast allen Browsern, was ein Pluspunkt ist. Aber Transparenz PNG nicht unterstützt IE6. Wenn Sie Ihre Website für ein solches Alter 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, wenn Sie die Anzeige optimieren). mobile Geräte, schließlich unbegrenztes Internet Ich habe es nicht immer zur Hand).
  4. Um die Farbe und/oder den Grad der Transparenz zu ändern, müssen Sie ein neues Bild erstellen und es auf den Server hochladen.

RGBA-Systemformat

Eine der modernsten Methoden, die Transparenz des Hintergrunds zu verändern, ist der Einsatz 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) ;

In dem uns bereits bekannten Beispiel ersetzen wir den Inhalt in CSS Datei wie folgt:

Körper (Hintergrund: URL(./vaden-pro-logo.png) ; /* Hintergrundbild */). prozrachen ( padding: 10px; Hintergrund: rgba(0 , 206 , 209 , 0.7 ) ; margin: 0 auto; width: 50%; Schriftart: 48px/ 64px Times New Roman; Farbe: weiß; text-align: justify; )

Wichtig!!!

  1. Im Gegensatz zur Immobilie Opazität Die Transparenz wird nur auf den Hintergrund eingestellt
  2. Im Gegensatz zur Methode PNG Bilder, um die Farbe oder den Grad der Transparenz zu ändern, müssen wir nur die Werte ändern rgba.
  3. Cross-Browser-Kompatibilität. Funktioniert in allen modernen Browsern (von IE9, Op10, Fx3,SF3.2).Bei älteren Browsern müssen Sie entweder auf Transparenz verzichten oder verwenden Opazität, png Methoden.

Karierte Bilder oder in Bezug auf die Geschichte

Diese Methode war der Ursprung des Webdesigns und sah alte, alte Browser vor, die eigentlich nichts konnten. Es besteht darin, einen karierten Hintergrund zu erstellen, in dem sich farbige Quadrate mit transparenten abwechseln.

Durch die Verwendung eines solchen Bildes als Hintergrund wurde ein pseudotransparenter Hintergrund erhalten.

Wichtig!!!

  1. Beim Betrachten von Text vor einem solchen Hintergrund können die Augen schnell ermüden (besonders die Wellen beim Scrollen sind bedrückend).
  2. Ansonsten ähneln die Anwendungsfunktionen der Methode „PNG-Bild“.

Fassen wir zusammen?

Du wirst brauchen

Anweisungen

Doppelklicken Sie auf den Namen der Ebene mit dem Bild und geben Sie in das angezeigte Feld einen beliebigen neuen Namen für diese Ebene ein. Dies ist notwendig, um diese Ebene frei verschieben zu können und beim Entfernen von Bildteilen einen transparenten Hintergrund zu erhalten. Wenn das Bild bereits einen undurchsichtigen, einheitlichen Hintergrund hat, wählen Sie ihn mit dem Zauberstab-Werkzeug aus. Wählen Sie dazu dieses Werkzeug in der Symbolleiste aus und klicken Sie auf die Hintergrundfarbe. Anschließend wird alles in der von Ihnen angegebenen Farbe (auf die mit der Maus geklickt wurde) innerhalb des umschlossenen Bereichs ausgewählt. Löschen Sie die Auswahl, indem Sie die Entf-Taste drücken.

Wenn es nicht einheitlich ist, wählen Sie das Bild selbst mit dem Werkzeug „Geradlinig“ oder „Stift“ aus. Wenn Sie ein Bild mit dem Stiftwerkzeug auswählen, erstellen Sie ein Layout gewünschte Kontur und bearbeiten Sie es bei Bedarf mit dem Stift+-Werkzeug. Beim Bearbeiten mit diesem Werkzeug können Sie Ankerpunkte hinzufügen, indem Sie auf den erstellten Pfad klicken und ihn durch Verschieben der Punkte ändern. Klicken Sie dann mit der rechten Maustaste und wählen Sie „Auswahl erstellen“, ohne den Cursor vom Pfad zu entfernen. Stellen Sie den Federwert auf 0 Pixel ein und aktivieren Sie die Option „Glätten“. Als Ergebnis dieser Aktionen wird der Pfad in eine Auswahl umgewandelt. Löschen Sie die Auswahl, indem Sie die Entf-Taste drücken.

Erstellen Sie eine neue Ebene und platzieren Sie sie unter der Bildebene. Bewegen Sie den Mauszeiger darüber und klicken Sie auf linke Taste Bewegen Sie den Cursor mit der Maus unter die Bildebene, ohne die Taste loszulassen. Auf diese Weise ziehen Sie eine neue Ebene unter die Bildebene. Erstellen Sie unter dem Bild selbst einen undurchsichtigen Hintergrund in der gewünschten Farbe und Form.

CSS-Transparenz- Cross-Browser-Lösung - 3,8 von 5 basierend auf 6 Stimmen

In dieser Lektion befassen wir uns mit der CSS-Transparenz, lernen, wie wir verschiedenen Seitenelementen Transparenz verleihen und eine vollständige browserübergreifende Kompatibilität erreichen, d. h. dieser Effekt funktioniert in verschiedenen Browsern gleich.

So legen Sie die Transparenz eines beliebigen Elements fest

In CSS3 ist die Eigenschaft opacity für die Erstellung transparenter Elemente verantwortlich, die auf jedes Element angewendet werden kann. Diese Eigenschaft hat Werte von 0 bis 1, die den Grad der Transparenz bestimmen. Dabei steht 0 für volle Transparenz (der Standardwert für alle Elemente) und 1 für volle Deckkraft. Werte werden als Brüche geschrieben: 0,1, 0,2, 0,3 usw.

Anwendungsbeispiel:

Transparenz



Browserübergreifende Transparenz

Nicht alle Browser nehmen die oben genannte Deckkrafteigenschaft auf die gleiche Weise wahr und implementieren sie. In manchen Fällen ist es notwendig, einen anderen Eigenschaftsnamen oder andere Filter zu verwenden.

Die folgenden Ansichten unterstützen die CSS3-Opacity-Eigenschaft Mozilla-Browser 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

So ein guter Browser :) Internet Explorer Bis zur Version 9.0 wird die Opazitätseigenschaft nicht unterstützt. Um Transparenz für diesen Browser zu erstellen, müssen Sie die Filtereigenschaft und den Wert Alpha (Opacity=X) verwenden, wobei X eine Ganzzahl im Bereich von 0 bis 100 ist, die die bestimmt Maß an Transparenz. 0 ist völlig transparent und 100 ist völlig undurchsichtig.

Hinsichtlich Firefox-Browser Vor Version 3.5 wird die Eigenschaft -moz-opacity anstelle von opacity unterstützt.

Browser wie Safari 1.1 und Konqueror 3.1, die auf der KHTML-Engine basieren, verwenden die Eigenschaft -khtml-opacity, um die Transparenz zu steuern.

Wie kann man die Transparenz in CSS so einstellen, dass sie in allen Browsern gleich aussieht? Um eine browserübergreifende Lösung für die Elementtransparenz zu erstellen, müssen sie nicht nur eine Opazitätseigenschaft, sondern den folgenden Satz von Eigenschaften angeben:

Filter: Alpha(Deckkraft=50); /* Transparenz für IE */ -moz-opacity: 0.5; /* Unterstützt Mozilla 3.5 und niedriger */ -khtml-opacity: 0.5; /* Unterstützt Konqueror 3.1 und Safari 1.1 */ opacity: 0.5; /* Unterstützt alle anderen Browser */

Transparenz verschiedener Elemente

Schauen wir uns einige Beispiele für die Einstellung der Transparenz an bestimmte Elemente, die auf der Seite am häufigsten verwendet werden.

CSS-Bildtransparenz.

Schauen wir uns mehrere Möglichkeiten zum Erstellen eines durchscheinenden Bildes an. Im folgenden Beispiel ist für das erste Bild keine Transparenz festgelegt, für das zweite eine Transparenz von 50 % und für das dritte Bild eine Transparenz von 30 %.

Transparenz



Ergebnis:

Transparenz in CSS, wenn Sie mit der Maus über ein Bild fahren.

Dies ist oft notwendig transparentes Bild oder ein anderes Element in dem Moment, in dem sich der Cursor darüber befindet. Dies kann mit erfolgen CSS-Hilfe Pseudoklasse:hover. Dazu müssen unserem Bild zwei Klassen zugewiesen werden, eine normale – das ist der inaktive Zustand des Bildes und die zweite Klasse mit der Pseudoklasse: hover, hier müssen Sie die Transparenz des Bildes im Moment angeben des Bewegens des Cursors.

Transparenz



Das Ergebnis können Sie in der Demo sehen.

Hintergrundtransparenz mit CSS.

Dabei ist zu beachten, dass die Transparenz für alle verschachtelten Elemente gilt und diese keine größere Transparenz als das verschachtelte Element haben können.

Als Beispiel geben wir eine Variante mit einem Seitenhintergrund, der aus einem Bild erstellt wurde, und einen Block mit einem Hintergrund, der aus Farbe erstellt wurde und eine Transparenz von 50 % aufweist.

Beispielcode:

Transparenz

Text


Hier ist das Ergebnis des oben geposteten Codes:



Freunden erzählen
Twitter
Anweisungen...
Nächster Artikel
Lesen Sie auch
So formatieren Sie Ihren Computer, damit Windows nicht gelöscht wird
So formatieren Sie Ihren Computer, damit Windows nicht gelöscht wird
2023-11-03 00:02:19
Die besten Datenbanken sammeln wir selbst
Die besten Datenbanken sammeln wir selbst
2023-11-02 00:06:06
Automatische Erkennung der Forum-Engine Bespravny powered by smf
Automatische Erkennung der Forum-Engine Bespravny powered by smf
2023-11-02 00:06:06
Was bedeutet ein in Symbolen geschriebenes Emoticon - Bedeutung von Symbolen und Dekodierung von Text-Emoticons
Was bedeutet ein in Symbolen geschriebenes Emoticon - Bedeutung von Symbolen und Dekodierung von Text-Emoticons
2023-11-01 00:03:09