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
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 số 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ămfilter: 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%;
}
3filter: 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
0filter: <filter-function> [<filter-function>]* | none
1trái ngược()
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%;
}
3filter: <filter-function> [<filter-function>]* | none
2filter: <filter-function> [<filter-function>]* | none
3filter: <filter-function> [<filter-function>]* | none
4filter: <filter-function> [<filter-function>]* | none
5bó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àyfilter: <filter-function> [<filter-function>]* | none
6filter: <filter-function> [<filter-function>]* | none
7filter: <filter-function> [<filter-function>]* | none
8filter: <filter-function> [<filter-function>]* | none
9thang độ 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>
8filter: url(file.svg#filter-element-id)
0filter: url(file.svg#filter-element-id)
1filter: url(file.svg#filter-element-id)
2hue-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)
3filter: url(file.svg#filter-element-id)
4filter: url(file.svg#filter-element-id)
5filter: 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>
8filter: url(file.svg#filter-element-id)
7filter: url(file.svg#filter-element-id)
8filter: 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)
0filter: url(resources.svg#c1)
1filter: url(resources.svg#c1)
2bã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%;
}
3filter: url(resources.svg#c1)
3filter: url(resources.svg#c1)
4filter: url(resources.svg#c1)
5nâ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>
8filter: url(resources.svg#c1)
6filter: url(resources.svg#c1)
7filter: url(resources.svg#c1)
8