Thuộc tính backdrop-filter

Thuộc tính backdrop-filter cho phép áp dụng các bộ lọc (làm mờ, thay đổi độ tương phản, hiệu ứng màu sắc) vào vùng nằm phía sau phần tử. Điều này tạo ra hiệu ứng "kính" hoặc "kính mờ".

Cú pháp

cssbộ chọn {
  backdrop-filter: none | <bộ lọc> [<bộ lọc>]*;
}

Giá trị

Giá trị	Mô tả
`none`	Không áp dụng bộ lọc (giá trị mặc định).
`blur()`	Áp dụng hiệu ứng làm mờ (ví dụ: `blur(5px)`).
`brightness()`	Thay đổi độ sáng của nền (ví dụ: `brightness(0.5)`).
`contrast()`	Thay đổi độ tương phản của nền (ví dụ: `contrast(200%)`).
`drop-shadow()`	Thêm bóng đổ vào nền.
`grayscale()`	Chuyển đổi nền thành thang độ xám (ví dụ: `grayscale(100%)`).
`hue-rotate()`	Thay đổi tông màu của nền (ví dụ: `hue-rotate(90deg)`).
`invert()`	Đảo ngược màu sắc của nền (ví dụ: `invert(100%)`).
`opacity()`	Thay đổi độ trong suốt của nền (ví dụ: `opacity(50%)`).
`sepia()`	Áp dụng hiệu ứng sepia cho nền (ví dụ: `sepia(100%)`).
`saturate()`	Thay đổi độ bão hòa màu của nền (ví dụ: `saturate(200%)`).

Có thể kết hợp nhiều bộ lọc bằng cách liệt kê chúng, phân tách bằng dấu cách.

Ví dụ . Làm mờ đơn giản

Hiệu ứng làm mờ nền cơ bản:

html<div class="blur-example">
  <div class="blur-box">
    Backdrop blur effect
  </div>
</div>

css.blur-example {
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 40px;
  height: 200px;
}

.blur-box {
  backdrop-filter: blur(6px);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 20px;
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: white;
  font-size: 22px;
}

Результат:

Ví dụ . Bộ lọc ánh sáng ấm

Hiệu ứng ánh sáng ấm với độ sáng tăng:

html<div class="warm-light-bg">
  <div class="warm-light">
    Warm lighting effect
  </div>
</div>

css.warm-light-bg {
  background: url('bg.png');
  background-size: cover;
  padding: 50px;
  height: 250px;
}

.warm-light {
  backdrop-filter: brightness(1.2) hue-rotate(20deg);
  background-color: rgba(255, 235, 205, 0.3);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
  text-align: center;
  color: #333;
  font-size: 24px;
}

Результат:

Ví dụ . Làm mờ với mặt nạ gradient

Sự kết hợp giữa làm mờ và gradient trong suốt một phần:

html<div class="gradient-mask">
  <div class="mask-content">
    Gradient mask effect
  </div>
</div>

css.gradient-mask {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.mask-content {
  backdrop-filter: blur(10px);
  background: linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0));
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

Ví dụ . Hiệu ứng phim cũ

Sự kết hợp giữa sepia và độ hạt:

html<div class="old-film">
  <div class="film-effect">
    Old film effect
  </div>
</div>

css.old-film {
  background: url('bg.png') center/cover;
  padding: 40px;
  height: 250px;
}

.film-effect {
  backdrop-filter: sepia(80%) contrast(110%) brightness(90%);
  background-color: rgba(0,0,0,0.1);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
}

Результат:

Ví dụ . Bộ lọc xanh lạnh

Hiệu ứng ánh sáng lạnh:

html<div class="cold-bg">
  <div class="cold-effect">
    Cool blue filter
  </div>
</div>

css.cold-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.cold-effect {
  backdrop-filter: hue-rotate(180deg) brightness(85%);
  background-color: rgba(200,230,255,0.2);
  padding: 30px;
  width: 75%;
  margin: 0 auto;
}

Результат:

Ví dụ . Độ tương phản cao

Hiệu ứng độ tương phản tăng cao:

html<div class="contrast-bg">
  <div class="contrast-effect">
    High contrast
  </div>
</div>

css.contrast-bg {
  background: url('bg.png') center/cover;
  padding: 40px;
  height: 250px;
}

.contrast-effect {
  backdrop-filter: contrast(200%) brightness(90%);
  background-color: rgba(0,0,0,0.1);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
}

Результат:

Ví dụ . Hiệu ứng màu nước

Làm mờ mềm mại với độ bão hòa tăng:

html<div class="watercolor-bg">
  <div class="watercolor-effect">
    Watercolor effect
  </div>
</div>

css.watercolor-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.watercolor-effect {
  backdrop-filter: blur(12px) saturate(200%);
  background-color: rgba(255,255,255,0.15);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

Ví dụ . Bóng đổ trên nền

Hiệu ứng bóng đổ trên hình nền:

html<div class="shadow-bg">
  <div class="shadow-effect">
    Drop shadow effect
  </div>
</div>

css.shadow-bg {
  background: url('bg.png') center/cover;
  padding: 40px;
  height: 250px;
}

.shadow-effect {
  backdrop-filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
  background-color: rgba(255,255,255,0.2);
  padding: 25px;
  width: 70%;
  margin: 20px auto;
}

Результат:

Ví dụ . Đảo ngược hoàn toàn

Đảo ngược hoàn toàn màu sắc nền:

html<div class="invert-bg">
  <div class="invert-effect">
    Full inversion
  </div>
</div>

css.invert-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.invert-effect {
  backdrop-filter: invert(100%);
  background-color: rgba(0,0,0,0.1);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

Ví dụ . Hiệu ứng làm tối

Làm tối nền trong khi vẫn giữ khả năng đọc chữ:

html<div class="darken-bg">
  <div class="darken-effect">
    Darkened background
  </div>
</div>

css.darken-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.darken-effect {
  backdrop-filter: brightness(40%);
  background-color: rgba(0,0,0,0.3);
  color: white;
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

Ví dụ . Hiệu ứng khử màu

Khử màu hoàn toàn nền:

html<div class="grayscale-bg">
  <div class="grayscale-effect">
    Grayscale filter
  </div>
</div>

css.grayscale-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.grayscale-effect {
  backdrop-filter: grayscale(100%);
  background-color: rgba(255,255,255,0.2);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

Ví dụ . Hiệu ứng độ bão hòa cao

Tăng cường màu sắc nền:

html<div class="saturate-bg">
  <div class="saturate-effect">
    Super saturated colors
  </div>
</div>

css.saturate-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.saturate-effect {
  backdrop-filter: saturate(300%);
  background-color: rgba(255,255,255,0.1);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

Ví dụ . Hiệu ứng nghệ thuật kết hợp

Kết hợp nhiều bộ lọc để tạo hiệu ứng nghệ thuật:

html<div class="artistic-bg">
  <div class="artistic-effect">
    Artistic combination
  </div>
</div>

css.artistic-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.artistic-effect {
  backdrop-filter: blur(3px) hue-rotate(90deg) saturate(150%) contrast(120%);
  background-color: rgba(255,255,255,0.15);
  padding: 30px;
  width: 80%;
  margin: 0 auto;
  color: white;
  text-shadow: 0 0 5px black;
}

Результат:

Ví dụ . Hiệu ứng trong suốt một phần

Điều chỉnh độ trong suốt của nền:

html<div class="opacity-bg">
  <div class="opacity-effect">
    Opacity control
  </div>
</div>

css.opacity-bg {
  background: url('bg.png') center/cover;
  padding: 50px;
  height: 300px;
}

.opacity-effect {
  backdrop-filter: opacity(50%);
  background-color: rgba(0,0,0,0.3);
  color: white;
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}

Результат:

Hỗ trợ trình duyệt

Thuộc tính được hỗ trợ trong hầu hết các trình duyệt hiện đại, nhưng có thể yêu cầu tiền tố -webkit- để tương thích đa trình duyệt đầy đủ.

Xem thêm

thuộc tính filter,
áp dụng hiệu ứng cho chính phần tử đó
thuộc tính opacity,
điều khiển độ trong suốt của phần tử
thuộc tính background-blend-mode,
xác định chế độ hòa trộn của các hình nền