Wie kann man ein Bild mit transparentem Text mit CSS erstellen
In diesem Snippet erfahren Sie mehr über die Methoden, mit denen Sie Text auf Bildern überziehen können. Für eine ideale Kombination solle das Bild dunkel und der Text hell sein.
Wie kann man ein Bild mit transparentem Text erstellen
Das ist nicht so schwierig, wie es scheint. Es ist ganz einfach und Sie können Ihr gewünschtes Ergebnis erreichen, wenn Sie nur CSS verwenden.
Um einen einfachen transparenten Text auf einem Bild zu haben, müssen Sie Ihr Bild oder Hintergrundbild in einem Element <div> und den Inhaltsblock in einem anderen <div> haben.
Verwenden Sie dann die CSS-Eigenschaft opacity um, ein durchsichtiges Image oder Text einzustellen. Die Eigenschaft opacity wird verwendet, um die Durchsichtigkeit eines Textes oder Fotos anzupassen. Der Wert opacity kann zwischen 0.0 bis 1.0 sein, wo der niedrige Wert hohe Durchsichtigkeit demonstriert und der hohe Wert niedrige Durchsichtigkeit zeigt. Der Betrag von opacity wird als Opacity% = Opacity * 100 aufgezählt.
Oder statt der Eigenschaft opacity können Sie gerade einen RGBA-Farbenwert einstellen. Beispiel ansehen:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
* {
box-sizing: border-box;
}
.parent {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.parent img {
vertical-align: middle;
}
.parent .text {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #ffffff;
width: 100%;
padding: 20px;
}
</style>
</head>
<body>
<h2>Durchsichtiger Text auf einem Image</h2>
<div class="parent">
<img src="https://www.w3docs.com/uploads/media/default/0001/03/faa2b10a44e1d88ddafbf7ab6002ce24659529d4.jpeg" alt="Notebook" style="width:100%;">
<div class="text">
<h2>Title</h2>
<p>Lorem Ipsum ist ein reiner Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und sie zu einem Musterbuch verarbeitete.</p>
</div>
</div>
</body>
</html>Ein anderes Beispiel, wo der Text auf ein Hintergrundbild, das den gesamten Bildschirm ausfüllt, eingestellt wird.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
font-family: 'Source Sans Pro', sans-serif;
}
header {
background:
linear-gradient(
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
), url(https://w3docs.com/uploads/media/default/0001/01/e4ecd8f48ea6eac1f966ccb81cd388241d54c948.jpeg);
background-size: cover;
height: 100vh;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
}
h1 {
text-transform: uppercase;
margin: 0;
font-size: 3rem;
white-space: nowrap;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>Kuchen und Früchte</h1>
</div>
</header>
</body>
</html>Wie kann man einen Text über einem Bild positionieren
Um den Text über einem Bild zu positionieren und zu definieren, wo er sich auf dem Bild befindet, müssen Sie die CSS-Eigenschaft position mit ihrem Wert "absolute" für die Textblöcke und den Wert "relative" für das übergeordnete Element anwenden. Verwenden Sie dann die CSS-Eigenschaften top, bottom left und right, um die Position eines Elements in Kombination mit der Eigenschaft position zu definieren. Und um den Textblock zu zentrieren, wenden Sie die Eigenschaft transform wie folgt an: transform: translate(-50%, -50%).
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.container {
position: relative;
text-align: center;
color: #000000;
font-size: 30px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Über einem Bild positionierter Text</h2>
<div class="container">
<img src="https://www.w3docs.com/uploads/media/default/0001/03/faa2b10a44e1d88ddafbf7ab6002ce24659529d4.jpeg" alt="Snow" style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Center</div>
</div>
</body>
</html>Wie kann man Textblöcke über einem Bild hinzufügen
Hier sehen wir, wie man Text in einer Box über Bildern erstellt. Auf einfache und zuverlässige Weise kann einem Bild ein transparenter Textblock hinzugefügt werden. Peitschen Sie auf etwas weißem Text ein leicht transparentes schwarzes Rechteck auf. Wenn die Überlagerung ausreichend undurchsichtig ist, können Sie fast jedes Bild darunter haben und der Text ist trotzdem vollständig lesbar.
Da wir bereits gelernt haben, wie man Textblöcke über einem Bild platziert und positioniert, müssen wir jetzt nur noch die CSS-Eigenschaft background verwenden, um unserem Textblock einen Hintergrundstil und eine Hintergrundfarbe hinzuzufügen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Bild mit Textblock</title>
<style>
.parent {
position: relative;
}
.text-block {
position: absolute;
bottom: 50px;
left: 20px;
background-color: #000;
opacity: .6;
color: white;
padding-left: 20px;
padding-right: 20px;
}
.parent img{
width:100%;
}
</style>
</head>
<body>
<h2>Textblock auf einem Bild</h2>
<div class="parent">
<img src="https://www.w3docs.com/uploads/media/default/0001/03/faa2b10a44e1d88ddafbf7ab6002ce24659529d4.jpeg" alt="Books" />
<div class="text-block">
<h3>Bücher</h3>
<p>Lesen Sie gerne Bücher?</p>
</div>
</div>
</body>
</html>Ein weiteres Beispiel mit dunklen und hellen Textblöcken.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Bild mit Textblock</title>
<style>
.block {
margin: 10px;
width: 230px;
height: 150px;
float: left;
background: url(https://w3docs.com/uploads/media/default/0001/03/b847dafa71d0dc9d81db3ddda418e12934a5aa88.png);
background-size: cover;
position: relative;
}
h2 {
position: absolute;
bottom: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.75);
padding: 4px 8px;
color: white;
margin: 0;
font: 14px Sans-Serif;
}
.light h2 {
background: rgba(255, 255, 255, 0.75);
color: black;
}
</style>
</head>
<body>
<div class="block">
<h2>Flying Birds</h2>
</div>
<div class="block light">
<h2>Flying Birds</h2>
</div>
</body>
</html>Blur-Effekt (Unschärfe) zum Textblock hinzufügen
Der verschwommene Teil des zugrunde liegenden Bildes ist eine erstaunlich gute Möglichkeit, überlagerten Text leicht lesbar zu machen.
Um einen Unschärfe-Effekt zu erzielen, müssen Sie die Eigenschaft filter mit dem Wert "blur" (filter: blur) für Ihren Textblock einstellen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Blur-Effekt auf Textblock</title>
<style>
* {
box-sizing: border-box;
}
.text-block {
background: url(https://w3docs.com/uploads/media/default/0001/03/0a71a511b3381286ced8e2fc7f331296cd96649f.png);
background-attachment: fixed;
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
margin: 20px;
}
.text-block > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.text-block > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.text-block > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.text-block > header > h2 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<h1>Blur-Effect auf Textblock</h1>
<div class="text-block">
<header>
<h2>
Blur Effect
</h2>
</header>
</div>
</body>
</html>Sie können den Unschärfe-Effekt weiter hinzufügen, um Ihren Text besser lesbar zu machen.
<!DOCTYPE html>
<html>
<head>
<title>Blur-Effekt auf Textblock</title>
<style>
* {
box-sizing: border-box;
}
.text-block {
background: url(https://w3docs.com/uploads/media/default/0001/03/0a71a511b3381286ced8e2fc7f331296cd96649f.png);
background-attachment: fixed;
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
margin: 20px;
}
.text-block > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
}
.text-block > header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(9px);
filter: blur(9px);
transform: scale(2) translateY(20px);
}
.text-block > header > h2 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<h1>Blur-Effekt auf Textblock</h1>
<div class="text-block">
<header>
<h2>
Blur-Effekt
</h2>
</header>
</div>
</body>
</html>