How to create an image with a transparent background using CSS?
The transparent text with the image is popular on web pages. The text with transparent background enhances the look of the text.
In this tutorial, we will be learning to create an image with a transparent(see-through) background text. This can be done with CSS.
Creating a transparent background text
To create an image with transparent background text, all we need to do is to take an <div> element and wrap the image and a child <div> with some text within it. Add position: relative to the parent <div> and position: absolute to the child <div> So that the text will be positioned above the image.
To make the background text transparent use RGBA color code. In addition to that add some other CSS properties to customize the elements.
Example: Creating a transparent background text with CSS
Here is an example where we have added an image with transparent text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<style>
.parent {
position: relative;
max-width: 520px;
}
.child {
position: absolute;
width: 100%;
background: rgba(0,0,0); /* fall back color */
background: rgba(0,0,0,0.3); /* transparent text*/
color: black;
bottom: 5px;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class= "parent">
<img src="https://s3.studytonight.com/tutorials/uploads/pictures/1629284313-101156.png">
<div class="child">
<h2> Transparent Text </h2>
<p> The Morning Shows the day </p>
</div>
</div>
</body>
</html>
Output
Here is the output of the above example.
Example: Creating a transparent text on image
We can also add an image on the background of the container and add a text with transparent background on it. It has been shown in this example where we have used background-image property to add image.
Conclusion
In this tutorial, we have learned to create an image with text which has a transparent background. We can do so using the CSS property. It has been explained with examples.
