轻松上手,快乐学习!

CSS 参考手册

CSS 参考手册CSS 浏览器支持CSS 选择器参考手册CSS 函数参考手册CSS 听觉参考手册CSS 网络安全字体CSS 动画相关属性CSS 单位Px/Em 换算CSS 颜色CSS 合法颜色值CSS 默认值参考手册CSS 实体

CSS 属性

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index


CSS filter 属性



实例

把所有图像都改为黑白(100% 灰色):

img {
  filter: grayscale(100%);
}
亲自试一试 »

提示: 下面有更多 "Try it Yourself" 实例。


定义和用法

filter 属性定义元素(通常是 <img>)的视觉效果(如模糊和饱和度)。

默认值: none
继承性: no
支持动画: yes. 阅读有关动画的信息 测试一下
版本: CSS3
JavaScript 语法: object.style.filter="grayscale(100%)" 测试一下

浏览器支持

表中的数字表示支持该属性的第一个浏览器版本。

紧跟在 -webkit- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
filter 53.0
18.0 -webkit-
13.0 35.0 9.1
6.0 -webkit-
40.0
15.0 -webkit-

语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 如需使用多个滤镜,请用空格分隔每个滤镜(参见页面下方的更多实例)。


Filter Functions

注释: 使用百分比值(例如 75%)的滤镜,也接受该值是十进制(例如 0.75)。

滤镜 描述 试一试
none 默认值。规定无效果。 亲自试一试 »
blur(px)

对图像应用模糊效果。较大的值将产生更多的模糊。

如果为指定值,则使用 0。

亲自试一试 »
brightness(%)

调整图像的亮度。

  • 0% 将使图像完全变黑。
  • 默认值是 100%,代表原始图像。
  • 值超过 100% 将提供更明亮的结果。
亲自试一试 »
contrast(%)

调整图像的对比度。

  • 0% 将使图像完全变黑。
  • 默认值是 100%,代表原始图像。
  • 超过 100% 的值将提供更具对比度的结果。
亲自试一试 »
drop-shadow(h-shadow v-shadow blur spread color)

对图像应用阴影效果。

可能的值:

  • h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。
  • v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。

blur -可选。这是第三个值,单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多(阴影会变得更大更亮)。不允许负值。如果未规定值,会使用 0(阴影的边缘很锐利)。

spread - 可选。这是第四个值,单位必须用像素。正值将导致阴影扩展并增大,负值将导致阴影缩小。如果未规定值,会使用 0(阴影与元素的大小相同)。

注释:Chrome、Safari 和 Opera,也许还有其他浏览器,不支持第 4 个长度;如果添加,则不会呈现。

color - 可选。为阴影添加颜色。如果未规定,则颜色取决于浏览器(通常为黑色)。

这个例子创建了红色的阴影,水平和垂直方向均为 8px,带有 10px 的模糊效果:

filter: drop-shadow(8px 8px 10px red);

提示: 这个滤镜类似 box-shadow 属性。

亲自试一试 »
grayscale(%)

将图像转换为灰阶。

  • 0% (0) 是默认值,代表原始图像。
  • 100% 将使图像完全变灰(用于黑白图像)。

注释:不允许负值。

亲自试一试 »
hue-rotate(deg)

在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg,代表原始图像。

注释: 最大值是 360deg。

亲自试一试 »
invert(%)

反转图像中的样本。

  • 0% (0) 是默认值,代表原始图像。
  • 100%将使图像完全反转。

注释:不允许负值。

亲自试一试 »
opacity(%)

设置图像的不透明度级别。opacity-level 描述了透明度级别,其中:

  • 0% 为完全透明。
  • 100% (1) 是默认值,代表原始图像(不透明)。

注释: 不允许负值。

提示: 这个滤镜类似 opacity 属性。

亲自试一试 »
saturate(%)

设置图像的饱和度。

  • 0% (0) will make the image completely un-saturated.
  • 100% is default and represents the original image.
  • Values over 100% provides super-saturated results.

注释:不允许负值。

亲自试一试 »
sepia(%)

将图像转换为棕褐色。

  • 0% (0) 是默认值,代表原始图像。
  • 100% 将使图像完全变为棕褐色。

注释: 不允许负值。

亲自试一试 »
url()

url() 函数接受规定 SVG 滤镜的 XML 文件的位置,并且可以包含指向特定滤镜元素的锚点。实例:

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

initial 将此属性设置为其默认值。请参阅 initial
inherit 从其父元素继承此属性。请参阅 inherit

更多实例

模糊实例

为图像添加模糊效果:

img {
  filter: blur(5px);
}
亲自试一试 »

模糊实例 2

应用模糊的背景图片:

img.background {
  filter: blur(35px);
}
亲自试一试 »

亮度实例

调整图像的亮度:

img {
  filter: brightness(200%);
}
亲自试一试 »

对比度实例

调整图像的对比度:

img {
  filter: contrast(200%);
}
亲自试一试 »

阴影实例

为图像应用阴影效果:

img {
  filter: drop-shadow(8px 8px 10px gray);
}
亲自试一试 »

灰阶实例

将图像转换为灰阶:

img {
  filter: grayscale(50%);
}
亲自试一试 »

色相旋转实例

在图像上应用色相旋转:

img {
  filter: hue-rotate(90deg);
}
亲自试一试 »

反转实例

反转图像中的样本:

img {
  filter: invert(100%);
}
亲自试一试 »

不透明度实例

设置图像的不透明度级别:

img {
  filter: opacity(30%);
}
亲自试一试 »

饱和度实例

调整图像的饱和度:

img {
  filter: saturate(800%);
}
亲自试一试 »

棕褐色实例

将图像转换为棕褐色:

img {
  filter: sepia(100%);
}
亲自试一试 »

使用多重滤镜

要使用多个滤镜,请用空格分隔每个滤镜。请注意,顺序很重要(例如在 sepia() 之后使用 grayscale() 将产生完全灰色的图像):

img {
  filter: contrast(200%) brightness(150%);
}
亲自试一试 »

所有滤镜

演示所有滤镜函数:

.blur {
  filter: blur(4px);
}

.brightness {
  filter: brightness(0.30);
}

.contrast {
  filter: contrast(180%);
}

.grayscale {
  filter: grayscale(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

.invert {
  filter: invert(100%);
}

.opacity {
  filter: opacity(50%);
}

.saturate {
  filter: saturate(7);
}

.sepia {
  filter: sepia(100%);
}

.shadow {
  filter: drop-shadow(8px 8px 10px green);
}
亲自试一试 »

相关页面

CSS 教程: CSS 图片

HTML DOM 参考手册: filter 属性