How To Create an Image with Transparent Text?
In this article, we will learn how to create an image with a transparent (see-through) background text, using CSS.
Prerequisites
Approach
- HTML Structure: The HTML structure consists of a <!DOCTYPE html> declaration followed by an HTML document containing an <div> element with a class of “box”. Inside this <div>, there is an <h1> element containing the text “w3wiki”.
- CSS Styling:
- The CSS contains global styles such as setting the box-sizing to border-box, and defining the font family, size, margin, and padding for the body.
- The .box class is used to style the container <div>. It sets the height to cover the entire viewport and applies a background image with specified properties like cover and no-repeat.
- The h1 element is styled to e absolutely positioned in the center of its parent .box container using the top, left, and transform properties. The font-size is set to be responsive using viewport width units (vw). Text color, text shadow, and mix-blend-mode are also applied for visual effects.
- Media queries are used to adjust the font size of the heading for different screen sizes. Smaller font sizes are applied for screens with a maximum width of 768px and 480px, ensuring responsiveness.
- The CSS utilizes media queries to ensure that the text size adapts to different screen sizes, providing a responsive design that looks good on various devices.
- The background image is fetched from a URL provided in the CSS. It’s set to cover the entire container and not repeat.
- The text is styled with text shadow and mix-blend-mode to enhance its appearance and ensure readability against the background image. The use of text-transform: uppercase transforms the text to uppercase.
Example: This example shows the implementation of the above-explained approach.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
font-size: 17px;
margin: 0;
padding: 0;
}
.box {
height: 100vh;
background:
url('https://media.w3wiki.net/wp-content/uploads/20211103124244/wind-300x193.jpg');
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 10vw;
color: #fff;
text-transform: uppercase;
text-shadow: 0 5px 10px rgba(0, 0, 0, 1);
mix-blend-mode: overlay;
}
@media screen and (max-width: 768px) {
h1 {
font-size: 8vw;
}
}
@media screen and (max-width: 480px) {
h1 {
font-size: 6vw;
}
}
</style>
</head>
<body>
<div class="box">
<h1>w3wiki</h1>
</div>
</body>
</html>
Output:
Final Output