Ví dụ: giả sử bạn có phần thân HTML sau

<div class="bg-doge">
  <h1 class="color-white">Hello World from the Doge!h1>
div>

Và sau đó bạn đặt quy tắc CSS sau cho lớp bg-doge (hình ảnh được sử dụng cho ví dụ này được tải xuống từ Unsplash)

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

Đầu ra của đoạn mã trên sẽ như sau

Hình nền có độ mờ

Như bạn có thể thấy, phần tử

bên trong thẻ

bị ảnh hưởng bởi thuộc tính opacity, khiến nó trở nên trong suốt giống như hình nền

Điều này là do thuộc tính opacity áp dụng cho mọi thứ bên trong phần tử vùng chứa. Bạn không thể làm cho phần tử con kém minh bạch hơn phần tử cha của nó

Để giải quyết vấn đề này, bạn cần đặt hình nền là con của thẻ

bằng cách sử dụng bộ chọn phần tử giả

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

2

Hãy xem cú pháp CSS sau

.bg-doge {
  position: relative;
  height: 600;

  /* extra style to center the content */
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-doge:before {
  content: "";
  background-image: url(bg-doge.jpeg);
  position: absolute;
  background-size: cover;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  opacity: .6;
}

Bộ chọn giả

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

2 ở trên được sử dụng để tạo hình nền. Vị trí tuyệt đối và các giá trị trên, trái, dưới, phải được áp dụng sao cho phần tử giả có cùng kích thước với phần tử gốc của nó

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

4 của phần tử giả được đặt thành

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

5 để đặt nó ở cuối đơn hàng. Nếu không có thuộc tính

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

4, nó sẽ được đặt lên trên các phần tử khác, chặn nội dung khỏi chế độ xem

Cuối cùng, vị trí

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

7 được đặt thành

.bg-doge {
  background-image: url(bg-doge.jpeg);
  background-size: cover;
  height: 600;
  opacity: 0.4;

  /* extra style to center the content */
  /* you can remove them later */
  display: flex;
  align-items: center;
  justify-content: center;
}
.color-white {
  color: #fff;
  background-color: #000;
}

8 để phần tử giả được chứa bên trong

Đầu ra sẽ như sau

Đã sửa độ mờ của hình nền bằng cách sử dụng phần tử giả

Bây giờ độ trong suốt của hình nền sẽ không được áp dụng cho nội dung của thẻ

Ngoài ra, bạn cũng có thể đặt hình nền chỉ trong suốt khi con trỏ di chuyển qua phần tử bằng cách sử dụng cú pháp CSS sau

Bạn có thể thay đổi độ mờ của hình nền trong CSS không?

độ mờ là một thuộc tính CSS cho phép bạn thay đổi độ mờ của một phần tử . Theo mặc định, tất cả các phần tử đều có giá trị là 1. Bằng cách thay đổi giá trị này gần hơn với 0, phần tử sẽ xuất hiện ngày càng trong suốt hơn. Trường hợp sử dụng phổ biến là sử dụng hình ảnh làm một phần của nền.

Làm thế nào để làm cho nền hình ảnh trong suốt?

Làm cho nền của bạn trong suốt bằng Adobe Photoshop .

Mở tệp biểu tượng

Thêm một lớp trong suốt. Chọn “Layer” > “New Layer” từ menu (hoặc chỉ cần nhấp vào biểu tượng hình vuông trong cửa sổ lớp). .

Xóa nền. .

Lưu dưới dạng hình ảnh PNG trong suốt

Đọc tiếp