Dieser Artikel führt Sie in ein Konzept ein, das Ihnen hilft, die Deckkraft in zu verstehen und erklären Ihnen, wie Sie diesen Parameter steuern. Die folgenden Hinweise werden in diesem Artikel behandelt:
- Deckkraft in CSS
- Deckkraft mit kaskadierenden Elementen geerbt
- RGBA-Attributeinstellung für kaskadierende Elemente
- Die Deckkraft ändert sich beim Hover-Effekt
Die Hintergrundopazität eines Elements ist eine nützliche Funktion im HTML-Design. Durch Festlegen der Deckkraft (umgekehrt zur Transparenz) kann ein Designer die Sichtbarkeit des Elements über die CSS-Deckkrafteigenschaft steuern. Dies wird im Allgemeinen als Hintergrundeinstellung verwendet, wenn Elemente übereinander kaskadiert werden.
Das häufigste Szenario, in dem diese Funktion verwendet wird, ist Folgendes:
- Ein teilweise transparentes Hintergrundbild wird hinter einem Textelement platziert.
- Das Hintergrundbild ist verschwommen sichtbar, sodass es den Text vor Ihnen nicht dominiert.
- Das Bild kann in den vollen Fokus geraten, wenn der Benutzer es ausdrücklich sehen möchte.
Vielleicht möchten Sie sich über die informieren bevor Sie mit dem Erlernen der CSS-Deckkraft beginnen.
Ein umfassendes CSS-Tutorial finden Sie unter Edureka CSS Tutorial für Anfänger . Sie erhalten ein hervorragendes Heads-up darüber, wie CSS zur Erweiterung des HTML-Webdesigns verwendet werden soll.
Fahren Sie mit diesem Artikel über Deckkraft in CSS fort
Deckkraft in CSS
In CSS wird die Deckkraft als numerischer Wert zwischen 0,0 und 1,0 festgelegt. Werte, die näher an Null liegen, bedeuten mehr Transparenz. Das Bild ist sehr hell sichtbar. Beginnen wir mit einem Beispiel für ein Bild, das mit 50% Transparenz angezeigt wird. Siehe Beispiel 1 unten.
TCP-Socket-Programmierung in Java
Beispiel 1: Hintergrundbild auf halb- eingestellt Transparenz
img {Deckkraft: 0,5 Filter: Alpha (Deckkraft = 50) / * Für IE8 und früher * /} 
Beispiel 1: Ausgabe
Originalbild (100% Deckkraft)
Bild mit 50% Deckkrafteinstellung
Im obigen Beispiel gab es nur ein Element - ein Bild. Mit dem Deckkraftparameter können auch andere Elemente wie Text, div-Elemente usw. festgelegt werden.
Fahren Sie mit diesem Artikel über Deckkraft in CSS fort
Deckkraft mit kaskadierenden Elementen geerbt
Wenn Elemente übereinander gestapelt werden und das Hintergrundelement die Deckkrafteinstellung hat, wird es von allen untergeordneten Elementen geerbt. Dies ist das Standardeinstellung . Das heißt, wenn ein Textfeld über einem Bild platziert wird und das Bild eine Deckkrafteinstellung von 0,5 hat, sind sowohl das Bild als auch das Textelement nur teilweise sichtbar.
Nehmen wir in unserem nächsten Beispiel die Instanz eines untergeordneten Textelements, das über dem TOM & JERRY-Bild platziert ist. Wir können den Standardopazitätseffekt in Beispiel 2 sehen.
.container {Position: relative Textausrichtung: mittlere Deckkraft: 0,5} .centered {Position: absolut oben: 50% links: 50% Transformation: übersetzen (-50%, -50%) Farbe: blau Schriftgröße: 40px} }} TOM JERRYBeispiel 2: Text erbt die Deckkraft vom übergeordneten Bild
Fahren Sie mit diesem Artikel über Deckkraft in CSS fort
RGBA-Attributeinstellung für kaskadierende Elemente
Es gibt eine andere Möglichkeit, die Deckkraft mit kaskadierenden Elementen zu steuern. Wenn Sie möchten, dass das untergeordnete Element von der Deckkraft des Hintergrundelements nicht betroffen ist, können Sie es verwenden RGBA-Attributeinstellung .
Beispiel 3: Verwenden der RGBA-Einstellung
Hintergrund: rgba (76, 175, 80, 1.0) / * Bild hat keine Deckkrafteinstellung * / / * Grüner Hintergrund für Text mit 100% Deckkraft * / / * Blauer Text hat 100% Deckkraft * /
Hintergrund: rgba (76, 175, 80, 0,4) / * Bild hat keine Deckkrafteinstellung * / / * Grüner Hintergrund für Text mit 40% Deckkraft * / / * Blauer Text wird immer noch mit 100% Deckkraft angezeigt * /
Nach dem RGB-Farbcode steht das Attribut 'a' für Alpha . Das Alpha Parameter ist eine Zahl zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig).
Fahren Sie mit diesem Artikel über Deckkraft in CSS fort
Die Deckkraft ändert sich beim Hover-Effekt
In einigen Szenarien möchten Webdesigner, dass die Deckkraft variiert, je nachdem, ob sich der Benutzer auf das Element konzentriert oder nicht. Angenommen, ein Bild ist standardmäßig auf 50% Deckkraft eingestellt. Wenn der Benutzer jedoch mit der Maus über das Bild fährt, soll das Bild mit 100% Deckkraft vollständig fokussiert werden.
Beispiel 4 zeigt, wie das gemacht wird.
Gemeinsame Punkte zu beachten:
- Die Deckkrafteinstellung ist eine Alternative zur Verwendung des Attributs 'Sichtbarkeit' in CSS. Die Verwendung der Deckkrafteinstellung erleichtert jedoch das Einstellen unterschiedlicher Transparenzgrade von Null bis Voll.
- Die Deckkraft ist nach sorgfältigen Tests in verschiedenen Browsern einzustellen. Wenn die Deckkraft auf niedrige Werte eingestellt ist, kann der Text oder das Bild manchmal vollständig unsichtbar oder unlesbar werden.
- Die Idee hinter der Verwendung von Deckkraft besteht darin, einige Elemente scharf zu fokussieren, während andere Hintergrundelemente die Aufmerksamkeit des Benutzers nicht ablenken. Daher werden solche Hintergrundelemente mit geringerer Deckkraft eingestellt.
- In Internet Explorer für IE8 und ältere Versionen ist die Opazitätseigenschaft eine Filtereinstellung zwischen 1 und 100. In allen anderen Browsern liegt sie zwischen 0 und 1.
Dies bringt uns zum Ende dieses Artikels über Opazität in CSS.
Wenn Sie mehr über die Webentwicklung erfahren möchten, lesen Sie die von Edureka. Mithilfe der Schulung zur Webentwicklungszertifizierung erfahren Sie, wie Sie mit HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- und Google-APIs beeindruckende Websites erstellen und für Amazon Simple Storage Service (S3) bereitstellen.
Wenn Sie immer noch interessiert sind Wenn Sie Fragen haben, können Sie diese im Kommentarbereich dieses Blogs „Opacity In CSS“ veröffentlichen. Wir werden uns so schnell wie möglich bei Ihnen melden.