Bagaimana membuat: Gambar dengan teks transparen

Belajar bagaimana membuat teks dengan latar belakang transparen (semitransparen) di gambar.

Teks gambar transparen

Norway
Heading

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

Coba sendiri

Bagaimana membuat teks gambar transparen

Keterangan pertama - Tambahkan HTML:

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Heading</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

Keterangan kedua - Tambahkan CSS:

.container {
  position: relative;
  max-width: 800px; /* 最大宽度 */
  margin: 0 auto; /* 将其居中 */
}
.container .content {
  position: absolute; /* 定位背景文本 */
  bottom: 0; /* 在底部。使用top:0将其附加到顶部 */
  background: rgb(0, 0, 0); /* 回退颜色 */
  background: rgba(0, 0, 0, 0.5); /* 不透明度为 0.5 的黑色背景 */
  color: #f1f1f1; /* 灰色文本 */
  width: 100%; /* 全宽 */
  padding: 20px; /* Beberapa margin dalam */
}

Coba sendiri