Thuộc tính
7 CSS áp dụng các hiệu ứng đồ họa như mờ hoặc chuyển màu sang một phần tử. Các bộ lọc thường được sử dụng để điều chỉnh kết xuất hình ảnh, hình nền và đường viền.filter: url[resources.svg#c1]
7 CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.filter: url[resources.svg#c1]
Bao gồm trong tiêu chuẩn CSS là một số chức năng đạt được các hiệu ứng được xác định trước. Bạn cũng có thể tham chiếu bộ lọc SVG với URL đến phần tử bộ lọc SVG.
Thử nó
Cú pháp
/* URL to SVG filter */
filter: url["filters.svg#filter-id"];
/* values */
filter: blur[5px];
filter: brightness[0.4];
filter: contrast[200%];
filter: drop-shadow[16px 16px 20px blue];
filter: grayscale[50%];
filter: hue-rotate[90deg];
filter: invert[75%];
filter: opacity[25%];
filter: saturate[30%];
filter: sepia[60%];
/* Multiple filters */
filter: contrast[175%] brightness[3%];
/* Use no filter */
filter: none;
/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;
Với một chức năng, hãy sử dụng các mục sau:
filter: []* | none
Để tham khảo phần tử SVG
filter: url[resources.svg#c1]
8, hãy sử dụng các mục sau:filter: url[file.svg#filter-element-id]
Nội suy
Khi hoạt hình, nếu cả bộ lọc bắt đầu và đầu cuối có một danh sách hàm có cùng độ dài mà không có
filter: url[resources.svg#c1]
9, thì mỗi chức năng bộ lọc của chúng được nội suy theo các quy tắc cụ thể của nó. Nếu chúng có độ dài khác nhau, các hàm bộ lọc tương đương bị thiếu từ danh sách dài hơn được thêm vào cuối danh sách ngắn hơn bằng cách sử dụng các giá trị ban đầu của chúng, thì tất cả các hàm bộ lọc được nội suy theo các quy tắc cụ thể của chúng. Nếu một bộ lọc là
Original image
Live example
SVG Equivalent
Static example
0, nó được thay thế bằng danh sách chức năng bộ lọc của chương trình khác bằng cách sử dụng các giá trị mặc định của hàm bộ lọc, thì tất cả các hàm bộ lọc được nội suy theo các quy tắc cụ thể của chúng. Nếu không, phép nội suy riêng biệt được sử dụng.Chức năng
Thuộc tính
filter: url[resources.svg#c1]
7 được chỉ định là
Original image
Live example
SVG Equivalent
Static example
0 hoặc một hoặc nhiều chức năng được liệt kê dưới đây. Nếu tham số cho bất kỳ hàm nào không hợp lệ, hàm sẽ trả về
Original image
Live example
SVG Equivalent
Static example
0. Ngoại trừ khi được ghi chú, các hàm lấy giá trị được biểu thị bằng dấu phần trăm [như trong
Original image
Live example
SVG Equivalent
Static example
4] cũng chấp nhận giá trị được biểu thị bằng thập phân [như trong
Original image
Live example
SVG Equivalent
Static example
5].Khi thuộc tính
filter: url[resources.svg#c1]
7 có hai hoặc nhiều hàm, kết quả của nó khác với cùng một chức năng được áp dụng riêng biệt bằng nhiều thuộc tính filter: url[resources.svg#c1]
7.Bộ lọc SVG
url[]
Lấy một URI trỏ đến bộ lọc SVG, có thể được nhúng trong tệp XML bên ngoài.
filter: url[resources.svg#c1]
Chức năng lọc
blur[]
Hàm
Original image
Live example
SVG Equivalent
Static example
8 áp dụng độ mờ Gaussian cho hình ảnh đầu vào. Giá trị của
Original image
Live example
SVG Equivalent
Static example
9 xác định giá trị của độ lệch chuẩn đối với hàm Gaussian hoặc có bao nhiêu pixel trên màn hình hòa trộn với nhau, do đó, giá trị lớn hơn sẽ tạo ra nhiều mờ hơn. Giá trị ban đầu cho phép nội suy là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
0. Tham số được chỉ định là độ dài CSS, nhưng không chấp nhận các giá trị phần trăm.
Original image
Live example
SVG Equivalent
Static example
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
brightness[]
Hàm
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
1 áp dụng hệ số nhân tuyến tính cho hình ảnh đầu vào, làm cho nó xuất hiện ít nhiều sáng. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 sẽ tạo ra một hình ảnh hoàn toàn màu đen. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 để lại đầu vào không thay đổi. Các giá trị khác là số nhân tuyến tính về hiệu ứng. Các giá trị của một lượng trên html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 được cho phép, cung cấp kết quả sáng hơn. Giá trị ban đầu cho phép nội suy là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
5.
Original image
Live example
SVG Equivalent
Static example
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: brightness[2];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
contrast[]
Hàm
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
6 điều chỉnh độ tương phản của hình ảnh đầu vào. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 sẽ tạo ra một hình ảnh hoàn toàn màu xám. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 để lại đầu vào không thay đổi. Các giá trị của một lượng trên html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 được cho phép, cung cấp kết quả với độ tương phản nhiều hơn. Giá trị ban đầu cho phép nội suy là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
5.filter: []* | none
0filter: []* | none
1filter: []* | none
2drop-shadow[]
Hàm
1 áp dụng hiệu ứng bóng cho hình ảnh đầu vào. Một bóng thả thực sự là một phiên bản mờ, mờ của mặt nạ alpha của hình ảnh đầu vào được vẽ trong một màu cụ thể, được tổng hợp bên dưới hình ảnh. Hàm chấp nhận tham số loại
2 [được xác định trong nền CSS và mô -đun Biên giới cấp 3], ngoại trừ từ khóa
3 và tham số
4 không được phép. Hàm này tương tự như thuộc tính
5 được thiết lập nhiều hơn; Sự khác biệt là với các bộ lọc, một số trình duyệt cung cấp khả năng tăng tốc phần cứng để có hiệu suất tốt hơn. Các tham số của tham số
2 như sau:
7
8 [bắt buộc]Đây là hai giá trị
9 để đặt phần bù bóng.
7 Chỉ định khoảng cách ngang. Các giá trị âm đặt bóng ở bên trái của phần tử.
8 Chỉ định khoảng cách dọc. Các giá trị âm đặt bóng trên phần tử. Xem
9 để biết các đơn vị có thể. Nếu cả hai giá trị là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
0, bóng được đặt phía sau phần tử [và có thể tạo hiệu ứng mờ nếu
4 và/hoặc
5 được đặt].
4 [tùy chọn]Đây là giá trị
9 thứ ba. Giá trị này càng lớn, độ mờ càng lớn, vì vậy bóng càng lớn và nhẹ hơn. Giá trị âm không được phép. Nếu không được chỉ định, nó sẽ là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
0 [cạnh của bóng rất sắc nét].
9 [tùy chọn]Xem các giá trị
9 cho các từ khóa và ký hiệu có thể. Nếu không được chỉ định, màu được sử dụng phụ thuộc vào trình duyệt - nó thường là giá trị của thuộc tính
9, nhưng lưu ý rằng Safari hiện đang vẽ một cái bóng trong suốt trong trường hợp này.filter: []* | none
3filter: []* | none
4filter: []* | none
5filter: []* | none
6grayscale[]
Hàm
Original image
Live example
SVG Equivalent
Static example
2 chuyển đổi hình ảnh đầu vào thành thang độ xám. Giá trị của
Original image
Live example
SVG Equivalent
Static example
3 xác định tỷ lệ chuyển đổi. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 là hoàn toàn màu xám. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 để lại đầu vào không thay đổi. Các giá trị giữa html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 và html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 là số nhân tuyến tính về hiệu ứng. Giá trị ban đầu cho phép nội suy là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
0.filter: []* | none
7filter: []* | none
8hue-rotate[]
Hàm
Original image
Live example
SVG Equivalent
Static example
9 áp dụng một vòng quay màu sắc trên hình ảnh đầu vào. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: brightness[2];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
0 xác định số độ xung quanh vòng tròn màu, các mẫu đầu vào sẽ được điều chỉnh. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: brightness[2];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
1 để lại đầu vào không thay đổi. Giá trị ban đầu cho phép nội suy là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
0. Mặc dù không có giá trị tối đa; Ảnh hưởng của các giá trị trên html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: brightness[2];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 bao quanh.filter: []* | none
9filter: url[file.svg#filter-element-id]
0filter: url[file.svg#filter-element-id]
1filter: url[file.svg#filter-element-id]
2invert[]
Hàm
html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: brightness[2];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
4 đảo ngược các mẫu trong hình ảnh đầu vào. Giá trị của
Original image
Live example
SVG Equivalent
Static example
3 xác định tỷ lệ chuyển đổi. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 hoàn toàn đảo ngược. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 để lại đầu vào không thay đổi. Các giá trị giữa html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 và html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 là số nhân tuyến tính về hiệu ứng. Giá trị ban đầu cho phép nội suy là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
0.filter: url[file.svg#filter-element-id]
3filter: url[file.svg#filter-element-id]
4độ mờ []
Hàm
filter: []* | none
01 áp dụng độ trong suốt cho các mẫu trong hình ảnh đầu vào. Giá trị của
Original image
Live example
SVG Equivalent
Static example
3 xác định tỷ lệ chuyển đổi. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 là hoàn toàn minh bạch. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 để lại đầu vào không thay đổi. Các giá trị giữa html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 và html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 là số nhân tuyến tính về hiệu ứng. Điều này tương đương với việc nhân các mẫu hình ảnh đầu vào với số lượng. Giá trị ban đầu cho phép nội suy là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
5. Hàm này tương tự như thuộc tính filter: []* | none
08 được thiết lập nhiều hơn; Sự khác biệt là với các bộ lọc, một số trình duyệt cung cấp khả năng tăng tốc phần cứng để có hiệu suất tốt hơn.filter: url[file.svg#filter-element-id]
5filter: url[file.svg#filter-element-id]
6saturate[]
Hàm
filter: []* | none
09 bão hòa hình ảnh đầu vào. Giá trị của
Original image
Live example
SVG Equivalent
Static example
3 xác định tỷ lệ chuyển đổi. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 hoàn toàn không bão hòa. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 để lại đầu vào không thay đổi. Các giá trị khác là số nhân tuyến tính về hiệu ứng. Các giá trị của số lượng trên html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 được cho phép, cung cấp kết quả siêu bão hòa. Giá trị ban đầu cho phép nội suy là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
5.filter: url[file.svg#filter-element-id]
7filter: url[file.svg#filter-element-id]
8sepia[]
Hàm
filter: []* | none
15 chuyển đổi hình ảnh đầu vào thành Sepia. Giá trị của
Original image
Live example
SVG Equivalent
Static example
3 xác định tỷ lệ chuyển đổi. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 là hoàn toàn màu sắc. Giá trị của html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 để lại đầu vào không thay đổi. Các giá trị giữa html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
2 và html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
3 là số nhân tuyến tính về hiệu ứng. Giá trị ban đầu cho phép nội suy là html {
height: 100%;
}
body {
font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida,
Arial, Helvetica, sans-serif;
color: rgb[51, 51, 51];
height: 100%;
overflow: hidden;
}
#img2 {
width: 100%;
height: auto;
filter: blur[5px];
}
table.standard-table {
border: 1px solid rgb[187, 187, 187];
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb[187, 187, 187];
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb[238, 238, 238];
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb[204, 204, 204];
text-align: left;
vertical-align: top;
width: 25%;
height: auto;
}
#img3 {
height: 100%;
}
0.filter: url[file.svg#filter-element-id]
9filter: url[resources.svg#c1]
0Kết hợp các chức năng
Bạn có thể kết hợp bất kỳ số lượng chức năng nào để thao tác kết xuất. Ví dụ sau đây giúp tăng cường độ tương phản và độ sáng của hình ảnh:
filter: url[resources.svg#c1]
1filter: url[resources.svg#c1]
2filter: url[resources.svg#c1]
3Định nghĩa chính thức
Cú pháp chính thức
filter: url[resources.svg#c1]
4Ví dụ
Áp dụng các chức năng bộ lọc
Ví dụ về việc sử dụng các chức năng được xác định trước được hiển thị dưới đây. Xem từng chức năng cho một ví dụ cụ thể.
filter: url[resources.svg#c1]
5Áp dụng các bộ lọc SVG
Ví dụ về việc sử dụng hàm URL với tài nguyên SVG như sau:
filter: url[resources.svg#c1]
6Thông số kỹ thuật
Hiệu ứng bộ lọc Mô -đun cấp 2 # FilterProperty # FilterProperty |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt