Bộ lọc css thay đổi màu sắc của hình ảnh

Question

Thuộc tính CSS

filter: blur(5px)

5 áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho một phần tử. Bộ lọc thường được sử dụng để điều chỉnh kết xuất hình ảnh, nền và đường viền

Nội dung chính Show

Làm cách nào để thay đổi màu hình ảnh bằng bộ lọc trong CSS?
Làm cách nào để thay đổi màu của hình ảnh trong CSS?
Làm cách nào để thay đổi màu hình ảnh PNG bằng 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 bằng URL tới phần tử bộ lọc SVG

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> 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, sử dụng như sau

filter: <filter-function> [<filter-function>]* | none

Để tham chiếu đến phần tử SVG

filter: blur(5px)

6, hãy sử dụng thông tin sau

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

Khi hoạt hình, nếu cả bộ lọc bắt đầu và kết thúc đều có danh sách chức năng có cùng độ dài mà không có

filter: blur(5px)

7, 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 lọc tương đương bị thiếu trong danh sách dài hơn sẽ đượ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, sau đó tất cả các hàm 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à

filter: blur(5px)

8, nó sẽ được thay thế bằng danh sách chức năng bộ lọc của bộ lọc khác bằng cách sử dụng các giá trị mặc định của chức năng bộ lọc, sau đó tất cả các chức năng bộ lọc được nội suy theo các quy tắc cụ thể của chúng. Mặt khác, nội suy rời rạc được sử dụng

Thuộc tính

filter: blur(5px)

5 được chỉ định là

filter: blur(5px)

8 hoặc một hoặc nhiều chức năng được liệt kê bên dưới. Nếu tham số cho bất kỳ hàm nào không hợp lệ, hàm đó sẽ trả về

filter: blur(5px)

8. Trừ khi được ghi chú, các hàm nhận 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 image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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>

2) cũng chấp nhận giá trị được biểu thị dưới dạng thập phân (như trong

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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>

3)

Khi một thuộc tính

filter: blur(5px)

5 có hai chức năng trở lên, kết quả của nó sẽ khác với các chức năng tương tự được áp dụng riêng lẻ bằng cách sử dụng nhiều thuộc tính

filter: blur(5px)

5

url()

Lấy một URI trỏ đến một bộ lọc SVG, có thể được nhúng trong một tệp XML bên ngoài

filter: url(resources.svg#c1)

mơ hồ()

Hàm

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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>

6 á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 image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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>

7 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, vì vậy 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à

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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. Tham số được chỉ định dưới dạng độ dài CSS, nhưng không chấp nhận giá trị phần trăm

filter: blur(5px)

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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>

độ sáng()

Hàm

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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 áp dụng hệ số nhân tuyến tính cho hình ảnh đầu vào, làm cho hình ảnh có vẻ sáng hơn hoặc kém hơn. 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%;
}

0 sẽ tạo ra một hình ảnh có màu đen hoàn toàn. 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%;
}

1 giữ nguyên đầu vào. Các giá trị khác là hệ số nhân tuyến tính trên hiệu ứng. Các giá trị của một số tiền 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%;
}

1 được cho phép, mang lại kết quả tốt 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%;
}

3

filter: brightness(2)

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

filter: <filter-function> [<filter-function>]* | none

0

filter: <filter-function> [<filter-function>]* | none

1

sự tương phản()

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

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

0 sẽ tạo ra một hình ảnh có màu xám hoàn toàn. 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%;
}

1 giữ nguyên đầu vào. Các giá trị của một số tiền 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%;
}

1 được cho phép, cung cấp kết quả có độ tương phản cao 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%;
}

3

filter: <filter-function> [<filter-function>]* | none

2

filter: <filter-function> [<filter-function>]* | none

3

filter: <filter-function> [<filter-function>]* | none

4

filter: <filter-function> [<filter-function>]* | none

5

bóng đổ ()

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

9 áp dụng hiệu ứng bóng đổ cho hình ảnh đầu vào. Bóng đổ thực sự là một phiên bản bù, mờ của mặt nạ alpha của hình ảnh đầu vào được vẽ bằng một màu cụ thể, được kết hợp bên dưới hình ảnh. Hàm chấp nhận một tham số kiểu

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

0 (được xác định trong ), 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>

1 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>

2 không được phép. Chức năng 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>

3 được thiết lập nhiều 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>

0 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>

5 (bắt buộc)

Độ lệch ngang cho bóng đổ, được chỉ định dưới dạng 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>

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

7 (bắt buộc)

Độ lệch dọc cho bóng đổ, được chỉ định dưới dạng 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>

6. Giá trị âm đặt bóng phía trên 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>

9 (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>

6 thứ ba. Giá trị này càng lớn thì độ mờ càng lớn, do đó bóng tối càng to và sáng hơn. Giá trị âm không được phép. Nếu không được chỉ định, nó sẽ là

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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 (cạnh của bóng tối sắc nét)

filter: brightness(2)

2 (tùy chọn)

Xem các giá trị

filter: brightness(2)

2 để biết các từ khóa và ký hiệu có thể có. Nếu không được chỉ định, màu được sử dụng tùy thuộc vào trình duyệt - nó thường là giá trị của thuộc tính

filter: brightness(2)

2, nhưng lưu ý rằng Safari hiện đang vẽ một bóng trong suốt trong trường hợp này

filter: <filter-function> [<filter-function>]* | none

6

filter: <filter-function> [<filter-function>]* | none

7

filter: <filter-function> [<filter-function>]* | none

8

filter: <filter-function> [<filter-function>]* | none

9

thang độ xám()

Hàm

filter: brightness(2)

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

filter: brightness(2)

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

1 hoàn toàn là thang độ 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%;
}

0 khiến đầ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%;
}

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

1 là hệ số nhân tuyến tính đối với hiệu ứng. Giá trị ban đầu cho phép nội suy là

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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

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

0

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

1

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

2

hue-rotate()

Hàm

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

2 áp dụng xoay màu sắc trên hình ảnh đầu vào. Giá trị của

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

3 xác định số độ xung quanh vòng tròn màu mà các mẫu đầu vào sẽ được điều chỉnh. Giá trị của

<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 giữ nguyên đầu vào. Giá trị ban đầu cho phép nội suy là

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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. Mặc dù không có giá trị tối đa;

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

3

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

4

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

5

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

6

đảo ngược()

Hàm

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

7 đảo ngược các mẫu trong ảnh đầu vào. Giá trị của

filter: brightness(2)

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

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

0 khiến đầ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%;
}

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

1 là hệ số nhân tuyến tính đối với hiệu ứng. Giá trị ban đầu cho phép nội suy là

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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

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

7

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

8

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

9

độ mờ()

Hàm

filter: <filter-function> [<filter-function>]* | none

04 áp dụng độ trong suốt cho các mẫu trong ảnh đầu vào. Giá trị của

filter: brightness(2)

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

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

1 giữ nguyên đầu vào. 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%;
}

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

1 là hệ số nhân tuyến tính đối với 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%;
}

3. Chức năng này tương tự như thuộc tính

filter: <filter-function> [<filter-function>]* | none

11 được thiết lập nhiều hơn;

filter: url(resources.svg#c1)

0

filter: url(resources.svg#c1)

1

filter: url(resources.svg#c1)

2

bão hòa ()

Hàm

filter: <filter-function> [<filter-function>]* | none

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

filter: brightness(2)

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

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

1 giữ nguyên đầu vào. Các giá trị khác là hệ số nhân tuyến tính trên hiệu ứng. Cho phép các giá trị của số tiền 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%;
}

1, mang lại 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%;
}

3

filter: url(resources.svg#c1)

3

filter: url(resources.svg#c1)

4

filter: url(resources.svg#c1)

5

nâu đỏ()

Hàm

filter: <filter-function> [<filter-function>]* | none

18 chuyển đổi hình ảnh đầu vào sang màu nâu đỏ. Giá trị của

filter: brightness(2)

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

1 hoàn toàn là màu nâu đỏ. 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%;
}

0 khiến đầ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%;
}

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

1 là hệ số nhân tuyến tính đối với hiệu ứng. Giá trị ban đầu cho phép nội suy là

<table class="standard-table">
  <thead>
    <tr>
      <th style="text-align: left;" scope="col">Original image</th>
      <th style="text-align: left;" scope="col">Live example</th>
      <th style="text-align: left;" scope="col">SVG Equivalent</th>
      <th style="text-align: left;" scope="col">Static example</th>
    </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

filter: url(resources.svg#c1)

6

filter: url(resources.svg#c1)

7

filter: url(resources.svg#c1)

8

Bạn có thể kết hợp bất kỳ số chức năng nào để thao tác kết xuất. Ví dụ sau tăng cường độ tương phản và độ sáng của hình ảnh

filter: url(resources.svg#c1)

9

filter: blur(5px)

0

filter: blur(5px)

1

Giá trị ban đầu_______0_______8Áp dụng cho tất cả các phần tử;

filter: blur(5px)

2

Ví dụ về việc sử dụng các chức năng được xác định trước được hiển thị bên dưới. Xem từng chức năng cho một ví dụ cụ thể

Làm cách nào để thay đổi màu hình ảnh bằng bộ lọc trong CSS?

Để làm như vậy, chúng ta sẽ làm theo cú pháp đã cho. .

lọc. nâu đỏ(). hue-rotate(). bão hòa ()

Thay đổi màu của hình ảnh thành màu xanh lam

.

img { bộ lọc. nâu đỏ (100%) màu sắc xoay (190 độ) bão hòa (900%);.

Thay đổi màu của hình ảnh thành xanh nhạt

.

img { bộ lọc. nâu đỏ (300%) màu sắc xoay (150 độ) bão hòa (450%);

Làm cách nào để thay đổi màu của hình ảnh trong CSS?

Chúng ta có thể thay đổi màu của hình ảnh PNG bằng cách sử dụng các kiểu CSS sau. bộ lọc. không có. mơ hồ(). độ sáng(). sự tương phản(). bóng đổ (). thang độ xám(). hue-rotate(). đảo ngược(). độ mờ(). bão hòa (). nâu đỏ(). url(). ban đầu. kế thừa ; .

Làm cách nào để thay đổi màu hình ảnh PNG bằng CSS?

Sử dụng chức năng lọc để thay đổi màu ảnh png . Thuộc tính bộ lọc chủ yếu được sử dụng để đặt hiệu ứng hình ảnh cho hình ảnh. Có nhiều giá trị thuộc tính tồn tại cho chức năng lọc. lọc. không có. mơ hồ(). độ sáng(). sự tương phản(). bóng đổ (). thang độ xám(). hue-rotate(). đảo ngược(). độ mờ(). bão hòa (). nâu đỏ(). url();

programming css