Wie kann man einem Text oder einem Bild mit CSS einen transparenten Hintergrund geben
Es gibt wirklich keine Eigenschaft, die der Transparenz in CSS entspricht. Sie können den Transparenzeffekt jedoch mit der CSS3-Eigenschaft opacity bekommen.
Die Eigenschaft opacity wird verwendet, um die Transparenz eines Bildes oder eines Textes festzulegen. Diese Eigenschaft wird verwendet, um die Transparenz eines Textes oder Bildes anzupassen. Die Zahl liegt zwischen 0 und 1, der Wert 1 ist der Standardwert und macht das Element völlig undurchsichtig. Ein Wert von 0 macht das Element vollständig transparent. Ein Wert zwischen 0 und 1 macht ein Element allmählich klar.
Um ein einfaches transparentes Bild zu erstellen, müssen Sie nur die Deckkraft für das Element <img> einstellen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.trans {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
</style>
</head>
<body>
<h2>Opacity: 0.5</h2>
<img class="trans" src="/uploads/media/default/0001/01/b5edc1bad4dc8c20291c8394527cb2c5b43ee13c.jpeg" alt="Image" width="200">
<h2>Original Image</h2>
<img src="/uploads/media/default/0001/01/b5edc1bad4dc8c20291c8394527cb2c5b43ee13c.jpeg" alt="Original Image" width="200">
</body>
</html>Hier sehen Sie ein Beispiel, wo das Bild im Background aufgrund opacity: 0.5 eingestellt ist.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background: url("/uploads/media/default/0001/01/b5edc1bad4dc8c20291c8394527cb2c5b43ee13c.jpeg") no-repeat;
background-size: cover;
}
.logo {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
div {
padding-top: 30px;
text-align: center;
}
</style>
</head>
<body>
<div>
<img class="logo" src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="Background Image">
</div>
</body>
</html>Nun sehen wir ein weiteres Beispiel, wo eine transparente Box mit einem Text im Inneren auf einem Hintergrundbild erstellt wird. Erstellen Sie eine Box mit dem Tag <div> und fügen Sie die Eigenschaft margin hinzu, um die Box in die Mitte Ihres Hintergrunds einzustellen. Stellen Sie dann die Eigenschaft opacity für Ihre Box ein.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.background {
background: url("/uploads/media/default/0001/01/b5edc1bad4dc8c20291c8394527cb2c5b43ee13c.jpeg") no-repeat center top;
border: 1px solid #666;
}
.box {
margin: 100px;
background-color: #eee;
border: 1px solid #666;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
}
.box p {
padding: 15px;
font-weight: bold;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="background">
<div class="box">
<p>Ich bin ein Text, der in einer transparenten Box platziert ist.</p>
</div>
</div>
</body>
</html>Ein weiteres Beispiel, wo der Selektor :after mit einem einzelnen Absatz verwendet wird, um die Deckkraft einzustellen. In diesem Beispiel gibt es auch ein Bild im Absatz.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
background-size:cover;
}
p {
width:50%;
padding:10px;
margin:10% auto;
color:#fff;
position:relative;
}
p:after {
content:'';
position:absolute;
top:0;left:0;
width:100%; height:100%;
background:#000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
z-index:-1;
}
img {
display:block;
margin:.6em auto;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" />
</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
img:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
</style>
</head>
<body>
<h2>Bewegen Sie mit der Maus über das Bild, um den Effekt zu sehen.</h2>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="House" width="300">
</body>
</html>