Hướng dẫn what is webkit filter in css? - bộ lọc webkit trong css là gì?

Question

Thuộc tính

filter: url(resources.svg#c1)

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.

Nội dung chính Show

Chức năng
Bộ lọc SVG
Chức năng lọc
Kết hợp các chức năng
Định nghĩa chính thức
Cú pháp chính thức
Áp dụng các chức năng bộ lọc
Áp dụng các bộ lọc SVG
Thông số kỹ thuật
Tính tương thích của trình duyệt web
CSS bộ lọc webkit là gì?
Phông nền webkit là gì
Bộ lọc dữ liệu trong CSS là gì?
Làm cách nào để lọc một hình ảnh trong CSS?

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à

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>
        <img
          id="img1"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <img
          id="img2"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <div class="svg-container">
          <svg
            id="img3"
            overflow="visible"
            viewBox="0 0 212 161"
            color-interpolation-filters="sRGB">
            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
            filter>
            <image
              xlink:href="test_form_2.jpeg"
              filter="url(#svgBlur)"
              width="212px"
              height="161px" />
          svg>
        div>
      td>
      <td>
        <img
          id="img4"
          class="internal default"
          src="test_form_2_s.jpg"
          style="width: 100%;" />
      td>
    tr>
  tbody>
table>

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à

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>
        <img
          id="img1"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <img
          id="img2"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <div class="svg-container">
          <svg
            id="img3"
            overflow="visible"
            viewBox="0 0 212 161"
            color-interpolation-filters="sRGB">
            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
            filter>
            <image
              xlink:href="test_form_2.jpeg"
              filter="url(#svgBlur)"
              width="212px"
              height="161px" />
          svg>
        div>
      td>
      <td>
        <img
          id="img4"
          class="internal default"
          src="test_form_2_s.jpg"
          style="width: 100%;" />
      td>
    tr>
  tbody>
table>

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ề

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>
        <img
          id="img1"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <img
          id="img2"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <div class="svg-container">
          <svg
            id="img3"
            overflow="visible"
            viewBox="0 0 212 161"
            color-interpolation-filters="sRGB">
            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
            filter>
            <image
              xlink:href="test_form_2.jpeg"
              filter="url(#svgBlur)"
              width="212px"
              height="161px" />
          svg>
        div>
      td>
      <td>
        <img
          id="img4"
          class="internal default"
          src="test_form_2_s.jpg"
          style="width: 100%;" />
      td>
    tr>
  tbody>
table>

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

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>
        <img
          id="img1"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <img
          id="img2"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <div class="svg-container">
          <svg
            id="img3"
            overflow="visible"
            viewBox="0 0 212 161"
            color-interpolation-filters="sRGB">
            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
            filter>
            <image
              xlink:href="test_form_2.jpeg"
              filter="url(#svgBlur)"
              width="212px"
              height="161px" />
          svg>
        div>
      td>
      <td>
        <img
          id="img4"
          class="internal default"
          src="test_form_2_s.jpg"
          style="width: 100%;" />
      td>
    tr>
  tbody>
table>

4) cũng chấp nhận giá trị được biểu thị bằng thập phân (như trong

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>
        <img
          id="img1"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <img
          id="img2"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <div class="svg-container">
          <svg
            id="img3"
            overflow="visible"
            viewBox="0 0 212 161"
            color-interpolation-filters="sRGB">
            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
            filter>
            <image
              xlink:href="test_form_2.jpeg"
              filter="url(#svgBlur)"
              width="212px"
              height="161px" />
          svg>
        div>
      td>
      <td>
        <img
          id="img4"
          class="internal default"
          src="test_form_2_s.jpg"
          style="width: 100%;" />
      td>
    tr>
  tbody>
table>

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

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>
        <img
          id="img1"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <img
          id="img2"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <div class="svg-container">
          <svg
            id="img3"
            overflow="visible"
            viewBox="0 0 212 161"
            color-interpolation-filters="sRGB">
            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
            filter>
            <image
              xlink:href="test_form_2.jpeg"
              filter="url(#svgBlur)"
              width="212px"
              height="161px" />
          svg>
        div>
      td>
      <td>
        <img
          id="img4"
          class="internal default"
          src="test_form_2_s.jpg"
          style="width: 100%;" />
      td>
    tr>
  tbody>
table>

8 áp dụng độ mờ Gaussian cho hình ảnh đầu vào. Giá trị của

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>
        <img
          id="img1"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <img
          id="img2"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <div class="svg-container">
          <svg
            id="img3"
            overflow="visible"
            viewBox="0 0 212 161"
            color-interpolation-filters="sRGB">
            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
            filter>
            <image
              xlink:href="test_form_2.jpeg"
              filter="url(#svgBlur)"
              width="212px"
              height="161px" />
          svg>
        div>
      td>
      <td>
        <img
          id="img4"
          class="internal default"
          src="test_form_2_s.jpg"
          style="width: 100%;" />
      td>
    tr>
  tbody>
table>

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.

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>
        <img
          id="img1"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <img
          id="img2"
          class="internal default"
          src="test_form_2.jpeg"
          style="width: 100%;" />
      td>
      <td>
        <div class="svg-container">
          <svg
            id="img3"
            overflow="visible"
            viewBox="0 0 212 161"
            color-interpolation-filters="sRGB">
            <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
            filter>
            <image
              xlink:href="test_form_2.jpeg"
              filter="url(#svgBlur)"
              width="212px"
              height="161px" />
          svg>
        div>
      td>
      <td>
        <img
          id="img4"
          class="internal default"
          src="test_form_2_s.jpg"
          style="width: 100%;" />
      td>
    tr>
  tbody>
table>

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%;
}

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

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.

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]"/>
      <feFuncG type="linear" slope="[amount]"/>
      <feFuncB type="linear" slope="[amount]"/>
    feComponentTransfer>
  filter>
svg>

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 286 217" color-interpolation-filters="sRGB">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
    feComponentTransfer>
  filter>
  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
svg><div>td>
      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" />td>
    tr>
  tbody>
table>

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

0

filter:  []* | none

1

filter:  []* | none

2

drop-shadow()

Hàm

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

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

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

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

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

3 và tham số

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

4 không được phép. Hàm này tương tự như thuộc tính

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

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ố

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

2 như sau:

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

7

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

8 (bắt buộc)

Đây là hai giá trị

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

9 để đặt phần bù bóng.

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

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

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

8 Chỉ định khoảng cách dọc. Các giá trị âm đặt bóng trên phần tử. Xem

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

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

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]"/>
      <feFuncG type="linear" slope="[amount]"/>
      <feFuncB type="linear" slope="[amount]"/>
    feComponentTransfer>
  filter>
svg>

4 và/hoặc

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]"/>
      <feFuncG type="linear" slope="[amount]"/>
      <feFuncB type="linear" slope="[amount]"/>
    feComponentTransfer>
  filter>
svg>

5 được đặt).

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]"/>
      <feFuncG type="linear" slope="[amount]"/>
      <feFuncB type="linear" slope="[amount]"/>
    feComponentTransfer>
  filter>
svg>

4 (tùy chọn)

Đây là giá trị

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  filter>
svg>

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

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]"/>
      <feFuncG type="linear" slope="[amount]"/>
      <feFuncB type="linear" slope="[amount]"/>
    feComponentTransfer>
  filter>
svg>

9 (tùy chọn)

Xem các giá trị

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]"/>
      <feFuncG type="linear" slope="[amount]"/>
      <feFuncB type="linear" slope="[amount]"/>
    feComponentTransfer>
  filter>
svg>

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

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="brightness">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]"/>
      <feFuncG type="linear" slope="[amount]"/>
      <feFuncB type="linear" slope="[amount]"/>
    feComponentTransfer>
  filter>
svg>

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

3

filter:  []* | none

4

filter:  []* | none

5

filter:  []* | none

6

grayscale()

Hàm

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 286 217" color-interpolation-filters="sRGB">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
    feComponentTransfer>
  filter>
  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
svg><div>td>
      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" />td>
    tr>
  tbody>
table>

2 chuyển đổi hình ảnh đầu vào thành thang độ xám. Giá trị của

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 286 217" color-interpolation-filters="sRGB">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
    feComponentTransfer>
  filter>
  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
svg><div>td>
      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" />td>
    tr>
  tbody>
table>

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

7

filter:  []* | none

8

hue-rotate()

Hàm

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 286 217" color-interpolation-filters="sRGB">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
    feComponentTransfer>
  filter>
  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
svg><div>td>
      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" />td>
    tr>
  tbody>
table>

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

9

filter: url(file.svg#filter-element-id)

0

filter: url(file.svg#filter-element-id)

1

filter: url(file.svg#filter-element-id)

2

invert()

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

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 286 217" color-interpolation-filters="sRGB">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
    feComponentTransfer>
  filter>
  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
svg><div>td>
      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" />td>
    tr>
  tbody>
table>

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)

3

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

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 286 217" color-interpolation-filters="sRGB">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
    feComponentTransfer>
  filter>
  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
svg><div>td>
      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" />td>
    tr>
  tbody>
table>

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)

5

filter: url(file.svg#filter-element-id)

6

saturate()

Hàm

filter:  []* | none

09 bão hòa hình ảnh đầu vào. Giá trị của

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 286 217" color-interpolation-filters="sRGB">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
    feComponentTransfer>
  filter>
  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
svg><div>td>
      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" />td>
    tr>
  tbody>
table>

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)

7

filter: url(file.svg#filter-element-id)

8

sepia()

Hàm

filter:  []* | none

15 chuyển đổi hình ảnh đầu vào thành Sepia. Giá trị của

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original imageth>
      <th style="text-align: left;" scope="col">Live exampleth>
      <th style="text-align: left;" scope="col">SVG Equivalentth>
      <th style="text-align: left;" scope="col">Static exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><img id="img1" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><img id="img2" class="internal default" src="test_form.jpg" style="width: 100%;" />td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewBox="0 0 286 217" color-interpolation-filters="sRGB">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="2"/>
        <feFuncG type="linear" slope="2"/>
        <feFuncB type="linear" slope="2"/>
    feComponentTransfer>
  filter>
  <image xlink:href="test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
svg><div>td>
      <td><img id="img4" class="internal default" src="test_form_s.jpg" style="width: 100%;" />td>
    tr>
  tbody>
table>

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)

9

filter: url(resources.svg#c1)

0

Kế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)

1

filter: url(resources.svg#c1)

2

filter: url(resources.svg#c1)

3

Định nghĩa chính thức

Cú pháp chính thức

filter: url(resources.svg#c1)

4

Ví 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)

6

Thông số kỹ thuật

Sự chỉ rõ
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

Xem thêm

CSS bộ lọc webkit là gì?

Thuộc tính CSS bộ lọc á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. 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.applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Included in the CSS standard are several functions that achieve predefined effects.

Phông nền webkit là gì

Thuộc tính bộ lọc phông nền 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.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.

Bộ lọc dữ liệu trong CSS là gì?

Kiểu dữ liệu CSS thể hiện hiệu ứng đồ họa có thể thay đổi sự xuất hiện của hình ảnh đầu vào.Nó được sử dụng trong các thuộc tính bộ lọc và bộ lọc bối cảnh.represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.

Làm cách nào để lọc một hình ảnh trong CSS?

Thí dụ.Thay đổi tất cả hình ảnh thành đen và trắng (100% xám): ....

Ví dụ mờ.Áp dụng một hiệu ứng mờ cho hình ảnh: ....

Vệ tinh mờ 2. Áp dụng hình nền mờ: ....

Ví dụ độ sáng.Điều chỉnh độ sáng của hình ảnh: ....

Ví dụ tương phản.Điều chỉnh độ tương phản của hình ảnh: ....

Bỏ cái bóng ví dụ.....

Ví dụ về thang độ xám.....

Ví dụ xoay vòng ..

programming css Filter CSS Webkit-filter: drop-shadow Filter grayscale webkit-filter vs filter CSS filter examples CSS filter red

Hướng dẫn what is webkit filter in css? - bộ lọc webkit trong css là gì?

Thử nó

Cú pháp

Nội suy

Chức năng

Bộ lọc SVG

url()

Chức năng lọc

blur()

brightness()

contrast()

drop-shadow()

grayscale()

hue-rotate()

invert()

độ mờ ()

saturate()

sepia()

Kết hợp các chức năng

Định nghĩa chính thức

Cú pháp chính thức

Ví dụ

Áp dụng các chức năng bộ lọc

Áp dụng các bộ lọc SVG

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

CSS bộ lọc webkit là gì?

Phông nền webkit là gì

Bộ lọc dữ liệu trong CSS là gì?

Làm cách nào để lọc một hình ảnh trong CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội