Wie stelle ich CSS-Transparenz ein? Zusammenfassung der Einstellungsmethoden für verschiedene Transparenzen in CSS-CSS-Tutorial-php.cn

In diesem Artikel erfahren Sie, wie Sie Transparenz in CSS festlegen. Werfen wir einen Blick auf den spezifischen Inhalt.

Deckkraft und Transparenz

Per Definition definieren Deckkraft und Transparenz in CSS die Sichtbarkeit eines Elements, unabhängig davon, ob es sich um ein Bild, eine Tabelle oder RGBA (Rot-Grün-Blau-Alpha) handelt ) Farbwert. Ihrer Bedeutung nach ist Opazität ein Maß dafür, wie undurchsichtig oder fest ein Element ist, während Transparenz misst, wie leicht man erkennen kann, was in den darunter liegenden Schichten vorhanden ist. Unabhängig davon funktionieren sie auf die gleiche Weise – 100 % undurchsichtig bedeutet, dass das Element vollständig sichtbar ist, während 100 % transparent bedeutet, dass es vollständig unsichtbar ist.

Anstatt teure Software zu verwenden, können Sie diese Effekte mit CSS erstellen! Mit ein paar einfachen Tastenanschlägen können Sie sofort das Aussehen eines Elements auf Ihrer Seite ändern oder in manchen Fällen sogar seine Reaktion, wenn der Mauszeiger darüber fährt.

Undurchsichtige und transparente Bilder

Beim Ändern des Bildes akzeptiert die Opazitätseigenschaft Werte zwischen 0,0 und 1,0, wobei letzterer der Standardwert ist. Je niedriger der Wert ist, desto transparenter wird das Bild.

Im folgenden Beispiel verwenden wir 0,2, 0,5 und 1,0 für einen direkten Vergleich:

Wie stelle ich CSS-Transparenz ein? Zusammenfassung der Einstellungsmethoden für verschiedene Transparenzen in CSS

img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

Nach dem Login kopieren

Hinweis: Wir haben das Filterattribut verwendet weil Internet Explorer-Versionen 8 und niedriger das Opazitätsattribut noch nicht erkennen.

Transparente Felder und Tabellen

Sie können das Opazitätsattribut verwenden, um einem Element Transparenz hinzuzufügen, einschließlich des Hintergrunds und aller seiner untergeordneten Elemente. Beispielsweise wird im Feld unten (bei Verwendung von

anstelle von und seinen untergeordneten Elementen) auch der gesamte Text transparent.

Wie stelle ich CSS-Transparenz ein? Zusammenfassung der Einstellungsmethoden für verschiedene Transparenzen in CSS

Der Text bewirkt außerdem, dass die Hintergrundfarbe transparent wird, sodass keine weiteren Änderungen erforderlich sind, wenn Sie dies erreichen möchten. Sie können den folgenden Code direkt verwenden, um diesen Effekt zu erzielen:

div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}

Nach dem Login kopieren

Verwenden Sie RGBA für Transparenz

Wenn Sie jedoch nur den Hintergrund und den Text ändern möchten Andere untergeordnete Elemente halten es undurchsichtig und Sie können es mit RGBA umgehen. Wenn Sie es gewohnt sind, mit Hexadezimalcodes zu arbeiten, können Sie andere Möglichkeiten zum Definieren von Farben in CSS kennenlernen, nämlich RGB/RGBA- und HSL/HSLA-Farben.

RGBA steht für rotes, grünes und blaues Alpha, und der Alpha-Parameter gibt die Deckkraft der RGB-Farbe an. Mithilfe von RGBA-Farbwerten können wir also die Deckkraft des Hintergrunds festlegen, während der Text schwarz bleibt:

Wie stelle ich CSS-Transparenz ein? Zusammenfassung der Einstellungsmethoden für verschiedene Transparenzen in CSS

Im obigen Beispiel haben wir die RGB-Werte 171.205.239 und dann verwendet Alpha-Parameter definieren seine Transparenz oder Transparenz. Zum Beispiel:

div { background：rgba（171,205,239,0.3）/ *蓝色背景，不透明度为30％* / }

Nach dem Login kopieren

Undurchsichtiger Text in transparentem CSS-Hintergrundbild

Eine weitere wirklich coole Sache, die Sie mithilfe von Deckkraft und Transparenz machen können, ist wahrscheinlich das Hinzufügen von Text in einem transparenten Feld um ein wirklich unpassendes oder dunkles Hintergrundbild auszugleichen, wie im Beispiel unten gezeigt.

Wie stelle ich CSS-Transparenz ein? Zusammenfassung der Einstellungsmethoden für verschiedene Transparenzen in CSS

Um diesen einfachen, aber effektiven Stil zu erstellen, verwenden Sie ein

-Element und nennen Sie seine Klassen „background“ und „transbox“. Bei der ersten Kategorie handelt es sich um ein Hintergrundbild und einen Rahmen, während es sich bei der zweiten Kategorie um eine separate Hintergrundfarbe und einen separaten Rahmen handelt. Fügen Sie abschließend Text mithilfe von Absätzen hinzu.

Zuerst erstellen wir ein

-Element (class="background") mit einem Hintergrundbild und einem Rahmen. Dann erstellen wir ein weiteres

(class="transbox") innerhalb des ersten

. Das

-Element hat eine Hintergrundfarbe und einen Rand – das div ist transparent. Im transparenten

haben wir etwas Text innerhalb des

-Elements hinzugefügt.

Hier ist der Code, den wir verwendet haben. Sie können ihn ändern und mit Ihren eigenen Bildern und Texten testen:

<html>
<head>
<style>
div.background {
background: url(green-tile.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p {
margin: 5%;
font-weight: bold;
font-family: Verdana;
font-size: 12px;
color: #000000;
}
</style>
</head>
<body>
<div>
<div>
<p>This is sample text placed in a transparent box.</p>
</div>
</div>
</body>
</html>

Nach dem Login kopieren

Abschließend

Es gibt viele mögliche Verwendungsmöglichkeiten für Opazität und Transparenz. Sei es rein ästhetischer Natur oder um Elemente auf der Webseite hervorzuheben. Es ist mit Sicherheit die günstigste Alternative dazu, sich auf Photoshop oder eine andere Fotobearbeitungssoftware zu verlassen, die all dies für Sie erledigt!

Das obige ist der detaillierte Inhalt vonWie stelle ich CSS-Transparenz ein? Zusammenfassung der Einstellungsmethoden für verschiedene Transparenzen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

css透明度

Quelle：php.cn

Vorheriger Artikel：Eine Einführung in die CSS-Prioritätsreihenfolge Nächster Artikel：Was ist die Line-Clamp-Eigenschaft von CSS? Wie benutzt man?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors