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

bộ 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:

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

.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:

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

.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:

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

.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:

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

.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:

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

.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:

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

.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:

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

.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:

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

.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:

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

.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ữ:

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

.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:

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

.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:

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

.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:

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

.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:

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

.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