Text with Transparent Background in CSS HTML
The text would be barely visible if you color it white and place it on a background image that is predominantly white in color. You can however use CSS to add a transparent light-dark background between the text and the image and it would be perfectly visible.
Also see: Font Colors for Video Captions
<h1><span>The quick brown fox jumped over the lazy dog</span></h1>
<style>
h1 {
width: 70%;
margin: auto;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 48px;
font-weight: 400;
text-align: center;
line-height: 80px;
}
h1 span {
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
Amit Agarwal
Google Developer Expert, Google Cloud Champion
Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.
Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory
