Độ mờ của hình nền CSS

Trong bài viết này, chúng ta sẽ xem cách đặt độ mờ của hình nền trong CSS. Độ mờ đục có thể được định nghĩa là chất lượng thiếu minh bạch. Nó có thể được sử dụng để xác định lượng nội dung được hiển thị

Cách tiếp cận. Chúng ta có thể sử dụng thuộc tính độ mờ trong CSS được sử dụng để thay đổi độ mờ của một phần tử. Giá trị của thuộc tính có thể được đặt trong phạm vi từ 0 đến 1, trong đó “0” hoàn toàn trong suốt và “1” mờ đục. Bất kỳ giá trị thập phân nào cũng có thể được sử dụng ở giữa để đặt độ mờ tương ứng

cú pháp

opacity: value;

Thí dụ. Trong ví dụ này, chúng tôi sẽ đặt hình nền thành

và sử dụng thuộc tính độ mờ để đặt độ mờ của hình ảnh này. Độ mờ được đặt thành 0. 2 để nền được làm trong suốt và văn bản ở trên cùng của hình ảnh hiển thị rõ ràng

Khi bạn thêm hình nền vào phần tử

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

1, bạn có thể muốn thay đổi độ mờ của hình ảnh để nội dung của phần tử

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

1 có thể nổi bật và dễ nhìn hơn

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

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

3 (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ử

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

4 bên trong thẻ

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

1 bị ảnh hưởng bởi thuộc tính

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

6, 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

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

6 á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ẻ

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

1 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

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

1

Đầ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ả

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

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

1

Ngoài ra, bạn cũng có thể đặt hình nền chỉ trong suốt khi con trỏ di chuột 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?

BG trong suốt là gì?