Heading
Lorem ipsum dolor sit amet, an his etiam torquatos.
Rasmdagi shaffof matn
CSS yordamida shaffof (orqasi ko‘rinib turadigan) fonli matnga ega rasm yaratishni o‘rganing.
Rasmdagi shaffof matn
Rasmdagi shaffof matn qanday yaratiladi
1-qadam) HTML qo‘shing:
Misol
<div class="container">
<img src="notebook.jpg" alt="Notebook" style="width:100%;">
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum..</p>
</div>
</div>
2-qadam) CSS qo‘shing:
Misol
.container {
position: relative;
max-width: 800px; /* Maximum width */
margin: 0 auto; /* Center it */
}
.container .content {
position: absolute; /* Position the background text */
bottom: 0; /* At the bottom. Use top:0 to append it to the top */
background: rgb(0, 0, 0); /* Fallback color */
background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
color: #f1f1f1; /* Grey text */
width: 100%; /* Full width */
padding: 20px; /* Some padding */
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!