Transparente Hintergrundfarbe in CSS
- Verwenden Sie RGBA, um Hintergrundfarbe und Transparenz in CSS festzulegen
- Transparente Hintergrundfarbe in CSS erstellen
Dank der transparenten Farbe von CSS können Hintergrundkomponenten von einem anderen oberen Element der Seite aus gesehen werden. background-color-Attribute können verwendet werden, um transparente Farben zu erzeugen.
In CSS wird keine Eigenschaft namens background-opacity verwendet, um die Deckkraft oder Transparenz des Hintergrunds eines Elements zu ändern, ohne andere Komponenten wie Schriftarten zu beeinflussen. Wenn Sie versuchen, dies mit der CSS-Eigenschaft opacity zu erreichen, wird dies auch die Deckkraft aller anderen Komponenten ändern.
Wir zeigen Ihnen anhand einiger Beispiele, wie Sie die transparente Hintergrundfarbe in CSS ändern können.
Verwenden Sie RGBA, um Hintergrundfarbe und Transparenz in CSS festzulegen
Sie können die RGBA-Farbe verwenden, die Alpha-Transparenz als Teil des in CSS 3 eingeführten Farbwerts enthält. Wie im folgenden Beispiel zu sehen ist, kann die Farbe RGBA verwendet werden, um die Farbe des Hintergrunds und seine Transparenz zu ändern.
Codebeispiel:
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-image: url("/img/DelftStack/logo.png");
}
p{
padding: 20px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the content.</p>
</body>
</html>
Transparente Hintergrundfarbe in CSS erstellen
Um eine transparente Hintergrundfarbe zu erstellen, verwenden Sie den CSS-Farbcode RGBA(). Der Effekt ist nützlich, um dem Element Aussehen und Gefühl zu verleihen, wenn Sie den Texthintergrund für Besucher sichtbar machen möchten, um das hintere Bild anzuzeigen.
Codebeispiel:
<html lang="en">
<head>
<title>CSS Make Background Color Transparent Using RGBA in CSS</title>
<style>
.main-div{
background-image: url("/img/DelftStack/logo.png");
background-attachment: scroll;
padding: 20px;
}
.transparent-bg{
background: rgba(255, 165, 0, 0.73);
padding: 20px;
color: #fff;
text-align: center;
font-size: 26px;
}
</style>
</head>
<body>
<h2>Transparent backgorund color using RGBA in CSS</h2>
<div class="main-div">
<div class="transparent-bg">
Transparent Background
</div>
</div>
</body>
</html>