CSS offers methods to style web pages. It provides many styling properties through which users can apply various effects in frontend development, and transparency is one of them. It allows users to set how transparent the elements on their web pages appear. Users can also set the transparency of the background, image, text, or another element by utilizing the CSS “opacity” property.
This post will demonstrate the method for changing text transparency in HTML and CSS.
How to Change Text Transparency in HTML/CSS?
To change the text transparency of an HTML page using CSS, try out the given procedure.
Step 1: Create a Container
First, create a “div” container with the help of the “<div>” tag. Then, insert a “class” with a particular name.
Step 2: Add Paragraph Tag
Next, add “<p>” tag to embed text in the form of a paragraph and assign it an “id” attribute:
<p id="para-1">Text with 50% transparency</p>
<p id="para-2">Text with 100% transparency</p>
</div>
It can be noticed that the text has been added successfully:
Step 3: Add Image
In the CSS section, first, access the “<body>” element using tag name and apply the following CSS properties:
background-image:url(Background.png);
background-repeat: no-repeat;
}
Here:
- “background-image” property is utilized to set the background image with the help of the “url()”. Inside the parentheses, specify the source or URL of the image.
- “background-repeat” is a property used to repeat the image. For instance, we have set the “background-repeat” as “no-repeat”.
Step 4: Style “div” Element
Now, access both “div” elements having the “.transparency” class, then access “<p>” elements by tag name and apply the following CSS properties:
font-size: 40px;
font-family: Arial, sans-serif;
letter-spacing: 5px;
font-weight: bold;
}
In the above-code:
- The “font-size” property is utilized for setting the size of the font.
- The “font-family” property specifies the font style.
- “letter-spacing” property increases or decreases the spaces between characters.
- The “font-weight” property is utilized for setting the font-weight. To do so, we have set its value as “bold”.
Output
Step 5: Style First “<p>” Element
Access the “<p>” element having the “para-1” id. For this purpose, we have utilized the “#” selector to access specific id and apply the mentioned properties:
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
color: #fff;
mix-blend-mode: overlay;
}
The description of above code is as follows:
- “text-shadow” property adds a shadow to text. In this scenario, the “rgba” value is used. Here, “rgb” represents the red, green, and blue colors, where “a” is used to set the value of opacity.
- The “color” property is applied for setting the color of the text.
- “mix-blend-mode” property blends the element’s content with its direct background.
Output
Step 6: Style Second “<p>” Element
Then, access the “<p>” element having id “#para-2”, and apply the same properties:
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
color: #fff;
mix-blend-mode: overlay;
}
Output
It can be observed that we have changed the text transparency in HTML using CSS.
Conclusion
To change the text transparency of the element, first, create the elements, such as “<p>”. Assign it an id attribute to access it in CSS. After that, utilize the “#” selector along with the “id” to access the element by id. Apply the “text-shadow” property along with the “rgba” value. Lastly, the “mix-blend-mode” property is used to mix the color with the parent background. This post has explained the procedure for changing text transparency in HTML using CSS.
