How to Create an Image with Transparent Text with CSS
How to » How to Create an Image with Transparent Text CSS
Study in this chapter:
1. - How do you make text transparent on a picture / image?
2. - background image with text overlay
3. -
text on image css
In this chapter we develop methods used to overlay text on images. For a better combination, the image should be dark and the text light.
We add CSS style to center an image as:Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Inline - by using the style attribute in HTML elements
Example:
The entire HTML and CSS code
To Create an Image with Transparent Text - CSS and HTML entire code
<!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;
}
h1 {
font-size: 18px;
}
h2 {
font-size: 22px;
color: #333;
}
.main-container {
position: relative;
text-align: center;
color: white;
width: 70%;
margin-top: 4px;
margin-right: auto;
margin-bottom: 4px;
margin-left: auto;
}
.container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.container img {vertical-align: middle;}
.container .content {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.4); /* Black background with 0.5 opacity */
color: #FF0;
width: 100%;
padding: 4px;
margin-right: auto;
margin-bottom: auto;
}
</style>
</head>
<body>
<div class="main-container">
<h2>Responsive Image with Transparent Text</h2>
<div class="container">
<img src="https://www.agernic.com/uploads/nice-france.jpg" alt="Notebook" style="width:100%;">
<div class="content">
<h1>Create an Image with Transparent Text with CSS</h1>
<p>The opacity attribute is used to adjust the transparency<br />
of text or pictures. The value of opacity lies between 0.0 to 1.0<br />
where the low value .</p>
</div>
</div>
</div>
</body>
</html>
Related subjects:
Create a Sticky Sidebar
Sticky image / element / div on scroll
Position Text Over an Image HTML CSS responsive
Center image inside div horizontally - example
To horizontally center a block element (like <div>), use margin: auto;
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</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.4);/* Black background with opacity */
color: #0F0;
width: 100%;
padding-top: 4px;
padding-right: 20px;
padding-bottom: 4px;
padding-left: 20px;
}
</style>
</head>
<body>
<h2>Transparent Text on an responsive Image</h2>
<div class="parent">
<img src="https://www.agernic.com/uploads/mountains.jpg" alt="mountain" style="width:100%;">
<div class="text">
<h2>Title</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled
it to make a type specimen book.
</p>
</div>
</div>
</body>
</html>
Tags: transparent image css, online, format, free, website, search, background, remove background from image free
How do you make text transparent on a picture? How do I make a PNG transparent text? How do I make text transparent on an image in HTML?
Simple transparent text on an image
For having a simple, transparent text on an image, you need to have your image or background image in a <div> element, and the content block in another <div>.
Then, use the CSS opacity property to set a transparent image or text.
The opacity property is used to adjust the transparency of a text or photo.
Summary of description
transparent image css, online, format, free, website, search, background, remove background from image free
How do you make text transparent on a picture? How do I make a PNG transparent text? How do I make text transparent on an image in HTML?
How to Create an Image with Transparent Text with CSS - how to
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.