Cách tạo: Hình ảnh có văn bản trong suốt

Học cách sử dụng CSS để tạo hình ảnh có văn bản trong suốt (bán trong suốt).

Văn bản hình ảnh trong suốt

Na Uy
Chủ đề

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.

Thử ngay

Cách tạo văn bản hình ảnh trong suốt

Bước 1 - Thêm HTML:

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

Bước 2 - Thêm CSS:

.container {
  position: relative;
  max-width: 800px; /* Độ rộng tối đa */
  margin: 0 auto; /* Trung tâm hóa */
}
.container .content {
  position: absolute; /* Định vị văn bản nền */
  bottom: 0; /* Ở dưới cùng. Sử dụng top:0 để gắn vào trên cùng */
  background: rgb(0, 0, 0); /* Màu mặc định */
  background: rgba(0, 0, 0, 0.5); /* Màu đen không mờ với độ mờ 0.5 */
  color: #f1f1f1; /* Văn bản màu xám */
  width: 100%; /* Toàn rộng */
  padding: 20px; /* Một số khoảng cách trong nội bộ */
}

Thử ngay