Hướng dẫn tạo lớp phủ css

Chỉ lớp phủ hình ảnh trong HTML / CSS: văn bản chồng lên hình ảnh, với hình ảnh hoặc văn bản thay đổi khi di chuột. Đoạn mã HTML và CSS để đưa vào HTM của bạn

Bạn đang xem: lớp phủ văn bản trên html hình ảnh

Xin chào,

Đây là một hướng dẫn rất đơn giản để thiết kế lớp phủ hình ảnh chỉ bằng HTML và CSS.

Thật vậy, ai mà chẳng muốn nhanh chóng định vị văn bản trên hình ảnh ? Sau đó, thay đổi nó trên di chuột hoặc thậm chí hiển thị một hình ảnh thay thế?

Mã được cung cấp trong bài viết này có thể áp dụng cho bất kỳ trang web nào. Chỉ cần tích hợp mã HTML trên một trang và mã CSS vào biểu định kiểu của bạn.

Bạn có thể tìm thấy nhiều cách khác nhau để thực hiện việc này trên internet, nhưng tôi muốn tổng hợp mọi thứ tôi tìm thấy để trích xuất một cách tối thiểu và trên hết giải pháp sạch.

Đối với tôi, lớp phủ chỉ là một lớp được đặt trên lớp khác . Trong HTML, điều đó có nghĩa là nó nằm ngoài luồng vì nó phải được định vị trên một phần tử khác, điều này không thể xảy ra với hành vi mặc định.

Lưu ý: Ở đây tôi không nói về văn bản trên hình nền, tiêu chuẩn trong HTML, mà là văn bản trên một phần tử hình ảnh (thẻ img khét tiếng). < / p>

Lớp phủ văn bản đơn giản mà không cần di chuột

Lớp phủ với thay đổi nền và văn bản khi di chuột

Lớp phủ với sự thay đổi văn bản và hình ảnh khi di chuột

Mã HTML: nội dung gốc và lớp phủ

Cấu trúc nội dung

Vùng chứa lớp overlay-image đóng gói tất cả cấu trúc cần thiết:

< ul>

Trên trang được viết không có trình tạo trang (trang HTML hoặc chủ đề WordPress đơn giản), chẳng hạn như bài viết này, điều cần thiết là d tinh chỉnh để bao gồm đúng nội dung gốc và lớp phủ trong trang.

Với trình tạo , nó có thể được thay thế bằng vùng chứa hiện có block (ví dụ: nó có thể là mô-đun “mã” Divi, mà chúng tôi chỉ cần thêm lớp overlay-image vào).

Đoạn mã dưới đây cũng bao gồm việc đóng gói các thẻ liên kết để làm cho hình ảnh có thể nhấp được, nhưng bạn có thể xóa chúng nếu không cần thiết.

Mã HTML

  / * Lớp phủ đơn giản * /
& lt; div class = "overlay-image" & gt; & lt; a href = "LINK_URL" & gt;
  & lt; img class = "image" src = "IMAGE" alt = "Văn bản thay thế" / & gt;
  & lt; div class = "text" & gt; Hình ảnh + văn bản
    KHÔNG BAO GIỜ & lt; / div & gt;
& lt; / a & gt; & lt; / div & gt;  

  / * Màu nền và lớp phủ văn bản khi di chuột * /
& lt; div class = "overlay-image" & gt; & lt; a href = "LINK_URL" & gt;
  & lt; img class = "image" src = "IMAGE" alt = "Văn bản thay thế" / & gt;
  & lt; div class = "normal" & gt;
    & lt; div class = "text" & gt; Hình ảnh + văn bản
      NGUỒN GỐC & lt; / div & gt;
  & lt; / div & gt;
  & lt; div class = "hover" & gt;
    & lt; div class = "text" & gt; Nền + văn bản
      HOVER & lt; / div & gt;
  & lt; / div & gt;
& lt; / a & gt; & lt; / div & gt;  

  / * Lớp phủ hình ảnh và văn bản khi di chuột * /
& lt; div class = "overlay-image" & gt; & lt; a href = "LINK_URL" & gt;
  & lt; img class = "image" src = "ORIGINAL_IMAGE" alt = "Văn bản thay thế" / & gt;
  & lt; div class = "normal" & gt;
    & lt; div class = "text" & gt; Hình ảnh + văn bản
      NGUỒN GỐC & lt; / div & gt;
  & lt; / div & gt;
  & lt; div class = "hover" & gt;
    & lt; img class = "image" src = "OVERLAY_IMAGE" alt = "Di chuột qua văn bản thay thế" / & gt;
    & lt; div class = "text" & gt; Hình ảnh + văn bản
      HOVER & lt; / div & gt;
  & lt; / div & gt;
& lt; / a & gt; & lt; / div & gt;  

Mã CSS: lớp phủ văn bản và thay đổi văn bản / hình ảnh khi di chuột

Đoạn mã dưới đây sẽ được đưa vào < strong> định nghĩa kiểu :

• tệp style.css được bao gồm trong tệp HTML của bạn nếu bạn làm việc trực tiếp trong HTML,
• tệp style.css của chủ đề con của bạn nếu bạn làm việc với WordPress,
• hoặc các tùy chọn trang Divi của bạn nếu cơ chế này chỉ được sử dụng tại một vị trí cụ thể.

Làm cách nào để hiển thị lớp phủ văn bản gốc hoặc đơn giản?

Lớp overlay-image cho phép bạn đặt vùng chứa chung khi không sử dụng trình tạo trang. Trong bài viết này, tôi đã thay thế “width: 100%;” bởi “width: 80% margin: auto;” để thêm lề.

Lưu ý quan trọng: Vùng chứa lớp phủ hình ảnh PHẢI được “định vị” chính nó (ở đây là tương đối) theo thứ tự để định vị các phần tử của chính nó.

Lớp phủ văn bản và hình ảnh gốc được xác định bởi .overlay-image .image và .overlay-image .text specifier:

• hình ảnh lấp đầy tất cả không gian có sẵn,
• văn bản được căn giữa trên hình ảnh bằng cách sử dụng “định vị” tuyệt đối trên khối vùng chứa và bản dịch X-Y (một CSS cổ điển).

Làm cách nào để hiển thị lớp phủ mới khi di chuột?

Lớp phủ di chuột được thực hiện bằng .overlay-image .hover và được “định vị” tuyệt đối để chiếm toàn bộ bề mặt của vùng chứa bao gồm cả hình ảnh và văn bản gốc (100% chiều rộng và chiều cao).

Khi di chuột, độ mờ của nó sẽ thay đổi từ 0 thành 1 với sự chuyển đổi mượt mà để làm cho nó xuất hiện trên div ban đầu.

Để chỉ phủ một khối văn bản (không có hình ảnh), trước tiên bạn phải ẩn văn bản gốc vì hình ảnh mới không có ở đó để làm như vậy.

Mã CSS

Tôi đã cố gắng phân tích mã để làm cho mã trở nên đơn giản, dễ đọc, nhỏ gọn và dễ sử dụng. Để làm như vậy, tôi chia nó thành ba phần mà bạn có thể chọn theo nhu cầu của mình.

Phần đầu tiên là chung cho tất cả ba loại lớp phủ trước đó và đây là phần duy nhất một lớp cần thiết cho lớp phủ văn bản đơn giản:

  / ********* Lớp phủ đơn giản hoặc nguyên bản ****** * /

/ * Hộp đựng chính * /
.overlay-image {
  chức vụ: thân nhân;
  chiều rộng: 100%;
}

/* Ảnh gốc */
.overlay-image .image {
  hiển thị: khối;
  chiều rộng: 100%;
  chiều cao: tự động;
}

/ * Lớp phủ văn bản gốc * /
.overlay-image .text {
  màu: #fff;
  font-size: 30px;
  chiều cao dòng: 1.5em;
  text-shadow: 2px 2px 2px # 000;
  text-align: center;
  vị trí: tuyệt đối;
  top: 50%;
  trái: 50%;
  biến đổi: dịch (-50%, -50%);
  chiều rộng: 100%;
}  

Phần này cần thiết bởi cả hai lớp phủ khi di chuột :

  / ********* Lớp phủ khi di chuột ******* /

/ * Lớp phủ mới khi di chuột * /
.overlay-image .hover {
  vị trí: tuyệt đối;
  đầu: 0;
  chiều cao: 100%;
  chiều rộng: 100%;
  độ mờ: 0;
  chuyển đổi: .5 giây dễ dàng;
}

/ * Giao diện lớp phủ mới khi di chuột * /
.overlay-image: hover .hover {
  độ mờ: 1;
}  

Phần cuối cùng này chỉ cần thiết cho nền + lớp phủ văn bản khi di chuột :

  / ********* Chỉ lớp phủ nền và văn bản khi di chuột ******* /

.overlay-image .normal {
  chuyển đổi: .5 giây dễ dàng;
}
.overlay-image: hover .normal {
  độ mờ: 0;
}
.overlay-image .hover {
  background-color: rgba (0,0,0,0.5);
}  

Kết luận

Như bạn có thể thấy, về mặt kỹ thuật, lớp phủ không quá khó … Thật tiếc là cơ chế này không phải là một phần của tất cả các chủ đề WordPress trên thị trường !

Xem thêm những thông tin liên quan đến chủ đề lớp phủ văn bản trên html hình ảnh

Background Image Overlay With Text | One Line CSS Trick 💡

• Tác giả: Html Hints
• Ngày đăng: 2021-02-10
• Đánh giá: 4 ⭐ ( 2448 lượt đánh giá )
• Khớp với kết quả tìm kiếm: Add any background image with this simple trick & add an overlay effect on it. Watch this full video to know that simple trick.
  –
  CSS BackgroundOverlay CssTrick

35 hiệu ứng hình ảnh CSS mà bạn không thể bỏ qua cho trang web của mình

• Tác giả: www.creativosonline.org
• Đánh giá: 5 ⭐ ( 9589 lượt đánh giá )
• Khớp với kết quả tìm kiếm: 35 hiệu ứng hình ảnh CSS hiện tại thực sự kích thích. Một số rất phức tạp đến một số rất đơn giản.

Cách hiệu ứng lớp phủ chỉ CSS với Box-Shadow / Mã hóa

• Tác giả: vi.phhsnews.com
• Đánh giá: 4 ⭐ ( 2046 lượt đánh giá )
• Khớp với kết quả tìm kiếm: Lớp phủ nội dung là một phần nổi bật của thiết kế web hiện đại. Chúng giúp bạn ẩn một phần tử trên trang web và sau đó – với sự chấp thuận của người dùng

Công Cụ Phủ Lớp Văn Bản Trong Các Hình Ảnh Quảng Cáo, Hướng Dẫn Kiểm Tra Text Ảnh Quảng Cáo Facebook

• Tác giả: dulongky.com
• Đánh giá: 4 ⭐ ( 8085 lượt đánh giá )
• Khớp với kết quả tìm kiếm: Khi quảng cáo trên Facebook, hình ảnh hấp dẫn sẽ giúp tăng sức hút với người xem, Tuy nhiên, phần hình ảnh phải đảm bảo các tiêu chí của Facebook để hiển thị tốt nhất

Thiết lập hình nền trong CSS

• Tác giả: timoday.edu.vn
• Đánh giá: 3 ⭐ ( 6452 lượt đánh giá )
• Khớp với kết quả tìm kiếm: Cách thiết lập hình nền trong CSS như màu sắc, hình ảnh, cách sử dụng các thuộc tính của hình nền như có lặp không, vị trí ảnh, viết css ngắn cho hình nền …

Cách tạo lớp phủ trên hình ảnh với Divi Builder

• Tác giả: codewatchers.com
• Đánh giá: 3 ⭐ ( 1107 lượt đánh giá )
• Khớp với kết quả tìm kiếm: Lớp phủ hình ảnh là một trong những cách tuyệt vời để thu hút khách truy cập bằng cách hiển thị thông tin bổ sung cho khách truy cập của bạn. Thông thường, điều này xảy ra khi chuột di chuột qua một…

Sử dụng hình ảnh làm lớp phủ Google Earth

• Tác giả: support.google.com
• Đánh giá: 5 ⭐ ( 6254 lượt đánh giá )
• Khớp với kết quả tìm kiếm: Sử dụng hình ảnh bản đồ để tạo thêm thông tin mà không cần nhúng vào bản đồ gốc của bạn.
  Để xem cách hình ảnh lớp phủ tương ứng với hình ảnh b

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình