这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
摘要
CSS滤镜(filter
)属提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。
CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜,通过一个URL链接到SVG滤镜元素(SVG filter element)。
注意: 老版本的 (4.0 到 9.0) Windows IE浏览器支持一种非标准的
"filter" ,且已经被弃用.
初始值 | none |
---|
适用元素 | all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements |
---|
是否是继承属性 | 否 |
---|
适用媒体 | visual |
---|
计算值 | as specified |
---|
Animation type | a filter function list |
---|
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
---|
语法
filter: url("filters.svg#filter-id");
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%);
/* Apply multiple filters */
filter: contrast(175%) brightness(3%);
/* Global values */
filter: inherit;
filter: initial;
filter: unset;
设置一种函数,方法如下:
filter: <filter-function> [<filter-function>]* | none
给SVG元素 <filter>
引用滤镜, 如下:
filter: url(svg-url#element-id)
实例
下面的例子是使用预设的滤镜函数。每个函数都有特定的例子.
.mydiv { filter: grayscale(50%) }
/* gray all images by 50% and blur by 10px */
img {
filter: grayscale(0.5) blur(10px);
}
下面的例子展示:通过url函数引入一个svg资源.
.target { filter: url(#c1); }
.mydiv { filter: url(commonfilters.xml#large-blur) }
函数
使用CSS滤镜属性,你需要设定下面某一函数的值。如果该值无效,函数返回“none“。除特殊说明外,函数的值如果接受百分比值(如34%),那么该函数也接受小数值(如0.34)。
url()
URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素.
filter: url(resources.svg#c1)
blur()
给图像设置高斯模糊。“radius”一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起,所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
filter: blur(5px)
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">SVG Equivalent</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td>
<td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3710/Test_Form_2.jpg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176">
<filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%" >
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<image xlink:href="/files/3710/Test_Form_2.jpeg" filter="url(#svgBlur)" x="5%" y="5%" width="212px" height="161px" />
</svg><div></td>
<td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3711/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;
-moz-filter:blur(5px);
-webkit-filter:blur(5px);
-o-filter:blur(5px);
-ms-filter:blur(5px);
filter:blur(5px); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
height: 100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
<svg height="0" xmlns="https://www.w3.org/2000/svg">
<filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</svg>
brightness()
给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。
filter: brightness(0.5)
<svg height="0" xmlns="https://www.w3.org/2000/svg">
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="[amount]"/>
<feFuncG type="linear" slope="[amount]"/>
<feFuncB type="linear" slope="[amount]"/>
</feComponentTransfer>
</filter>
</svg>
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">SVG Equivalent</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form.jpg" id="img1" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td>
<td><img alt="Test_Form.jpg" id="img2" class="internal default" src="/files/3708/Test_Form.jpg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="https://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217">
<filter id="brightness">
<feComponentTransfer>
<feFuncR type="linear" slope="2"/>
<feFuncG type="linear" slope="2"/>
<feFuncB type="linear" slope="2"/>
</feComponentTransfer>
</filter>
<image xlink:href="/files/3708/Test_Form.jpg" filter="url(#brightness)" width="286px" height="217px" />
</svg><div></td>
<td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3709/Test_Form_s.jpg" style="width: 100%;" /></td>
</tr>
</tbody>
</table>
html {
height:100%;
}
body {
font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif;
color: rgb(51, 51, 51);
height:100%;
overflow:hidden;
}
#img2 {
width:100%;
height:auto;
-moz-filter:brightness(2);
-webkit-filter:brightness(2);
-o-filter:brightness(2);
-ms-filter:brightness(2);
filter:brightness(2); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
height:100%;
width: 85%;
}
table.standard-table th {
border: 1px solid rgb(187, 187, 187);
padding: 0px 5px;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
text-align: left;
font-weight: bold;
}
table.standard-table td {
padding: 5px;
border: 1px solid rgb(204, 204, 204);
text-align: left;
vertical-align: top;
width:25%;
height:auto;
}
#img3 {
height:100%;
}
contrast()
调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
filter: contrast(200%)
<svg height="0" xmlns="https://www.w3.org/2000/svg">
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
<feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
<feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
</feComponentTransfer>
</filter>
</svg>
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">SVG Equivalent</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_3.jpeg" id="img1" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_3.jpg" id="img2" class="internal default" src="/files/3712/Test_Form_3.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="https://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151">
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="2" intercept="-0.5"/>
<feFuncG type="linear" slope="2" intercept="-0.5"/>
<feFuncB type="linear" slope="2" intercept="-0.5"/>
</feComponentTransfer>
</filter>
<image xlink:href="/files/3712/Test_Form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" />
</svg><div></td>
<td><img alt="Test_Form_s.jpg" id="img4" class="internal default" src="/files/3713/Test_Form_3_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;
-moz-filter:contrast(200%);
-webkit-filter:contrast(200%);
-o-filter:contrast(200%);
-ms-filter:contrast(200%);
filter:contrast(200%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
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%;
}
drop-shadow()
给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(
在CSS3背景中定义)类型的值,除了“inset”关键字是不允许的。该函数与已有的box-shadow
box-shadow
属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。 <shadow>参数如下:
<offset-x>
<offset-y>
(必须)
- 这是设置阴影偏移量的两个
<length>
值. <offset-x>
设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>
设定垂直距离.负值会使阴影出现在元素上方。.查看 <length>
可能的单位.
如果两个值都是0
, 则阴影出现在元素正后面 (如果设置了 <blur-radius>
and/or <spread-radius>,
会有模糊效果).
<blur-radius>
(可选)
- 这是第三个
<length>
值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利).
<spread-radius>
(可选)
- 这是第四个
<length>
值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。
<color>
(可选)
- 查看
<color>
该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用color color
属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
filter: drop-shadow(16px 16px 10px black)
<svg height="0" xmlns="https://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
<feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
<feFlood flood-color="[color]"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">SVG Equivalent</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_4.jpeg" id="img1" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_4.jpg" id="img2" class="internal default" src="/files/3714/Test_Form_4.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="https://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
<feOffset dx="16" dy="16"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<image xlink:href="/files/3714/Test_Form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" />
</svg><div></td>
<td><img alt="Test_Form_4_s.jpg" id="img4" class="internal default" src="/files/3715/Test_Form_4_s.jpg" style="width: 100%;" /></td>
</tr>
<tr>
<td><img alt="Test_Form_4 distorded border - Original image" id="img11" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
<td><img alt="Test_Form_4 distorded border - Live example" id="img12" class="internal default" src="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
<td>
<div class="svg-container">
<svg xmlns="https://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187">
<filter id="drop-shadow2">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="8" dy="10"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<image xlink:href="/files/8467/Test_Form_4_irregular-shape_opacity-gradient.png" filter="url(#drop-shadow2)" width="213px" height="161px" />
</svg>
<div>
</td>
<td><img alt="Test_Form_4 distorded border drop shadow - Static example" id="img14" class="internal default" src="/files/8469/Test_Form_4_irregular-shape_opacity-gradient_drop-shadow.png" 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;
-moz-filter: drop-shadow(16px 16px 10px black);
-webkit-filter: drop-shadow(16px 16px 10px black);
-o-filter: drop-shadow(16px 16px 10px black);
-ms-filter: drop-shadow(16px 16px 10px black);
filter: drop-shadow(16px 16px 10px black);
}
#img12 {
width:100%;
height:auto;
-moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
-webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
-o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
-ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
filter: ;
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
#irregular-shape {
width: 64%;
}
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, #img13 {
height:100%;
}
grayscale()
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。
filter: grayscale(100%)
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">SVG Equivalent</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_5.jpeg" id="img1" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_5.jpg" id="img2" class="internal default" src="/files/3716/Test_Form_5.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="https://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184">
<filter id="grayscale">
<feColorMatrix type="matrix"
values="0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0 0 0 1 0"/>
</filter>
<image xlink:href="/files/3716/Test_Form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" />
</svg><div></td>
<td><img alt="Test_Form_5_s.jpg" id="img4" class="internal default" src="/files/3717/Test_Form_5_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;
-moz-filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-o-filter:grayscale(100%);
-ms-filter:grayscale(100%);
filter:grayscale(100%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
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%;
}
hue-rotate()
给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
filter: hue-rotate(90deg)
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">SVG Equivalent</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_6.jpeg" id="img1" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_6.jpg" id="img2" class="internal default" src="/files/3718/Test_Form_6.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="https://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190">
<filter id="hue-rotate">
<feColorMatrix type="hueRotate"
values="90"/>
</filter>
<image xlink:href="/files/3718/Test_Form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" />
</svg><div></td>
<td><img alt="Test_Form_6_s.jpg" id="img4" class="internal default" src="/files/3719/Test_Form_6_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;
-moz-filter:hue-rotate(90deg);
-webkit-filter:hue-rotate(90deg);
-o-filter:hue-rotate(90deg);
-ms-filter:hue-rotate(90deg);
filter:hue-rotate(90deg); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
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%;
}
invert()
反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。
filter: invert(100%)
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">SVG Equivalent</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_7.jpeg" id="img1" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_7.jpg" id="img2" class="internal default" src="/files/3720/Test_Form_7.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="https://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276">
<filter id="invert">
<feComponentTransfer>
<feFuncR type="table" tableValues="1 0"/>
<feFuncG type="table" tableValues="1 0"/>
<feFuncB type="table" tableValues="1 0"/>
</feComponentTransfer>
</filter>
<image xlink:href="/files/3720/Test_Form_7.jpeg" filter="url(#invert)" width="183px" height="276px" />
</svg><div></td>
<td><img alt="Test_Form_7_s.jpg" id="img4" class="internal default" src="/files/3721/Test_Form_7_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;
-moz-filter: invert(100%);
-webkit-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
filter: invert(100%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
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%;
}
opacity()
转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
filter: opacity(50%)
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">SVG Equivalent</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_14.jpeg" id="img1" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_14.jpg" id="img2" class="internal default" src="/files/3725/Test_Form_14.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="https://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183">
<filter id="opacity">
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0.5">
</feComponentTransfer>
</filter>
<image xlink:href="/files/3725/Test_Form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" />
</svg><div></td>
<td><img alt="Test_Form_14_s.jpg" id="img4" class="internal default" src="/files/3726/Test_Form_14_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;
-moz-filter: opacity(50%);
-webkit-filter: opacity(50%);
-o-filter: opacity(50%);
-ms-filter: opacity(50%);
filter: opacity(50%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
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%;
}
saturate()
转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。
filter: saturate(200%)
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">SVG Equivalent</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_9.jpeg" id="img1" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_9.jpg" id="img2" class="internal default" src="/files/3722/Test_Form_9.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="https://www.w3.org/2000/svg" id="img3" viewbox="0 0 201 239">
<filter id="saturate">
<feColorMatrix type="saturate"
values="2"/>
</filter>
<image xlink:href="/files/3722/Test_Form_9.jpeg" filter="url(#saturate)" width="201px" height="239px" />
</svg><div></td>
<td><img alt="Test_Form_9_s.jpg" id="img4" class="internal default" src="/files/3724/Test_Form_9_s.jpeg" 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;
-moz-filter: saturate(200%);
-webkit-filter: saturate(200%);
-o-filter: saturate(200%);
-ms-filter: saturate(200%);
filter: saturate(200%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
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%;
}
sepia()
将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。
filter: sepia(100%)
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">SVG Equivalent</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_12.jpeg" id="img1" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_12.jpg" id="img2" class="internal default" src="/files/3727/Test_Form_12.jpeg" style="width: 100%;" /></td>
<td><div class="svg-container"><svg xmlns="https://www.w3.org/2000/svg" id="img3" viewbox="0 0 259 194">
<filter id="sepia">
<feColorMatrix type="matrix"
values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0"/>
</filter>
<image xlink:href="/files/3727/Test_Form_12.jpeg" filter="url(#sepia)" width="259px" height="194px" />
</svg><div></td>
<td><img alt="Test_Form_12_s.jpg" id="img4" class="internal default" src="/files/3728/Test_Form_12_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;
-moz-filter: sepia(100%);
-webkit-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%); }
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
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%;
}
复合函数
你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。
filter: contrast(175%) brightness(3%)
<table class="standard-table">
<thead>
<tr>
<th align="left" scope="col">Original image</th>
<th align="left" scope="col">Live example</th>
<th align="left" scope="col">Static example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="Test_Form_8.jpeg" id="img1" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_8.jpg" id="img2" class="internal default" src="/files/3729/Test_Form_8.jpeg" style="width: 100%;" /></td>
<td><img alt="Test_Form_8_s.jpg" id="img4" class="internal default" src="/files/3730/Test_Form_8_s.jpeg" 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;
-moz-filter: contrast(175%) brightness(103%);
-webkit-filter: contrast(175%) brightness(103%);
-o-filter: contrast(175%) brightness(103%);
-ms-filter: contrast(175%) brightness(103%);
filter: contrast(175%) brightness(103%);
}
table.standard-table {
border: 1px solid rgb(187, 187, 187);
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 1.286em;
width: 85%;
height: 100%;
}
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%;
}
规范
浏览器兼容性
特点 |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
基本支持 |
18.0-webkit [4] |
35 (35) [1] [2] |
未实现 [3] |
15.0-webkit |
6.0-webkit |
特点 |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
基本支持 |
4.4-webkit |
35 (35) [1] [2] |
未实现 |
22.0 (Yes)-webkit |
6.0 (Yes)-webkit
|
[1] Before Firefox 34, Gecko only implements the url()
form of the filter
property; as chaining was not implemented then, only one url()
was allowed (or when the layout.css.filters.enabled
pref is set to false
).
[2] The functional values of filter
is controlled by the layout.css.filters.enabled
pref and was available but disabled by default in Firefox 34.
[3] Internet Explorer 4.0 to 9.0 implemented a non-standard filter
property. The syntax was completely different from this one and is not documented here.
[4] In Chrome 18 to 19, saturate()
function only takes integers instead of decimal or percentage values. This bug is fixed in Chrome 20 and further.
查看更多