Cách tạo: Hiệu ứng lớp che

Học cách tạo hiệu ứng lớp che phủ bằng CSS (một hiệu ứng叠加).

Cách tạo hiệu ứng lớp che phủ

Bước 1 - Thêm HTML:

Sử dụng bất kỳ phần tử nào và đặt nó ở bất kỳ vị trí nào trong tài liệu:

<div id="overlay"></div>

Bước 2 - Thêm CSS:

Đặt樣式 cho phần tử lớp che phủ:

#overlay {
  position: fixed; /* Nằm trên nội dung trang */
  display: none; /* Ẩn mặc định */
  width: 100%; /* Rộng toàn bộ (che phủ toàn bộ trang) */
  height: 100%; /* Cao toàn bộ (che phủ toàn bộ trang) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Màu đen có độ trong suốt */
  z-index: 2; /* Nếu bạn sử dụng thứ tự khác cho các phần tử khác, hãy chỉ định thứ tự sắp xếp */
  cursor: pointer; /* Thêm con trỏ chuột khi悬停 */
}

Bước 3 - Thêm JavaScript:

Mở và đóng hiệu ứng lớp che phủ bằng JavaScript:

function on() {
  document.getElementById("overlay").style.display = "block";
}
function off() {
  document.getElementById("overlay").style.display = "none";
}

Thử trực tiếp

Hiệu ứng lớp che phủ có văn bản

Thêm bất kỳ nội dung nào bạn muốn vào lớp che phủ và đặt nó ở vị trí bạn muốn. Trong ví dụ này, chúng tôi đã thêm văn bản vào giữa trang:

Mô hình

<style>
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay">
  <div id="text">Overlay Text</div>
</div>

Thử trực tiếp