Hàm Bán kính của mờ, được chỉ định là blur[]
CSS áp dụng độ mờ Gaussian cho hình ảnh đầu vào. Kết quả của nó là .
blur[]
CSS function applies a Gaussian blur to the input image. Its result is a
.
Thử nó
Cú pháp
Thông số
radius
. Nó xác định giá trị của độ lệch chuẩn đối với hàm Gaussian, tức là, có bao nhiêu pixel trên màn hình hòa trộn với nhau; Do đó, một giá trị lớn hơn sẽ tạo ra nhiều mờ hơn. Một giá trị của
0
để lại đầu vào không thay đổi. Giá trị ban đầu cho phép nội suy là 0
.Ví dụ
Đặt một vệt mờ với pixel và với REM
blur[0] /* No effect */
blur[8px] /* Blur with 8px radius */
blur[1.17rem] /* Blur with 1.17rem radius */
Thông số kỹ thuật
Hiệu ứng bộ lọc Mô-đun cấp 2 # funcdef bộ lọc-blur # funcdef-filter-blur |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt
Xem thêm
Thuộc tính
1 CSS cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu sang khu vực phía sau một phần tử. Bởi vì nó áp dụng cho mọi thứ đằng sau phần tử, để xem hiệu ứng bạn phải tạo ra phần tử hoặc nền của nó ít nhất là một phần trong suốt./* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url[commonfilters.svg#filter];
/* values */
backdrop-filter: blur[2px];
backdrop-filter: brightness[60%];
backdrop-filter: contrast[40%];
backdrop-filter: drop-shadow[4px 4px 10px blue];
backdrop-filter: grayscale[30%];
backdrop-filter: hue-rotate[120deg];
backdrop-filter: invert[70%];
backdrop-filter: opacity[20%];
backdrop-filter: sepia[90%];
backdrop-filter: saturate[80%];
/* Multiple filters */
backdrop-filter: url[filters.svg#filter] blur[4px] saturate[150%];
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
1 CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent./* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url[commonfilters.svg#filter];
/* values */
backdrop-filter: blur[2px];
backdrop-filter: brightness[60%];
backdrop-filter: contrast[40%];
backdrop-filter: drop-shadow[4px 4px 10px blue];
backdrop-filter: grayscale[30%];
backdrop-filter: hue-rotate[120deg];
backdrop-filter: invert[70%];
backdrop-filter: opacity[20%];
backdrop-filter: sepia[90%];
backdrop-filter: saturate[80%];
/* Multiple filters */
backdrop-filter: url[filters.svg#filter] blur[4px] saturate[150%];
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
Thử nó
Cú pháp
/* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url[commonfilters.svg#filter];
/* values */
backdrop-filter: blur[2px];
backdrop-filter: brightness[60%];
backdrop-filter: contrast[40%];
backdrop-filter: drop-shadow[4px 4px 10px blue];
backdrop-filter: grayscale[30%];
backdrop-filter: hue-rotate[120deg];
backdrop-filter: invert[70%];
backdrop-filter: opacity[20%];
backdrop-filter: sepia[90%];
backdrop-filter: saturate[80%];
/* Multiple filters */
backdrop-filter: url[filters.svg#filter] blur[4px] saturate[150%];
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
Giá trị
/* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url[commonfilters.svg#filter];
/* values */
backdrop-filter: blur[2px];
backdrop-filter: brightness[60%];
backdrop-filter: contrast[40%];
backdrop-filter: drop-shadow[4px 4px 10px blue];
backdrop-filter: grayscale[30%];
backdrop-filter: hue-rotate[120deg];
backdrop-filter: invert[70%];
backdrop-filter: opacity[20%];
backdrop-filter: sepia[90%];
backdrop-filter: saturate[80%];
/* Multiple filters */
backdrop-filter: url[filters.svg#filter] blur[4px] saturate[150%];
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
2Không có bộ lọc được áp dụng cho phông nền.
/* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url[commonfilters.svg#filter];
/* values */
backdrop-filter: blur[2px];
backdrop-filter: brightness[60%];
backdrop-filter: contrast[40%];
backdrop-filter: drop-shadow[4px 4px 10px blue];
backdrop-filter: grayscale[30%];
backdrop-filter: hue-rotate[120deg];
backdrop-filter: invert[70%];
backdrop-filter: opacity[20%];
backdrop-filter: sepia[90%];
backdrop-filter: saturate[80%];
/* Multiple filters */
backdrop-filter: url[filters.svg#filter] blur[4px] saturate[150%];
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
3Một danh sách phân tách không gian của S hoặc bộ lọc SVG sẽ được áp dụng cho bối cảnh.
Định nghĩa chính thức
Cú pháp chính thức
backdrop-filter =
none |
=
[ | ]+=
|
|
|
|
|
|
|
|
|
=
blur[ ? ]=
brightness[ [ | ]? ]=
contrast[ [ | ]? ]=
drop-shadow[ [ ? && {2,3} ] ]=
grayscale[ [ | ]? ]=
hue-rotate[ [ | ]? ]=
invert[ [ | ]? ]=
opacity[ [ | ]? ]=
sepia[ [ | ]? ]=
saturate[ [ | ]? ]
Ví dụ
CSS
.box {
background-color: rgba[255, 255, 255, 0.3];
border-radius: 5px;
font-family: sans-serif;
text-align: center;
line-height: 1;
-webkit-backdrop-filter: blur[10px];
backdrop-filter: blur[10px];
max-width: 50%;
max-height: 50%;
padding: 20px 40px;
}
html,
body {
height: 100%;
width: 100%;
}
body {
background-image: url[//picsum.photos/id/1080/6858/4574],
linear-gradient[rgb[219, 166, 166], rgb[0, 0, 172]];
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
HTML
backdrop-filter: blur[10px]
Kết quả
Thông số kỹ thuật
Hiệu ứng bộ lọc Module Cấp 2 # BackdropFilterProperty # BackdropFilterProperty |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt