CSS 数据类型 - filter-function

CSS 数据类型 <filter-function>表示图形效果，该效果会更改输入图像的外观。此数据类型用于 CSS 的 filter 和 backgrounddrop-filter 属性。

可能的值

数据类型 <filter-function> 是使用以下过滤器函数之一定义的，其中每个函数都需要传递一个参数。如果参数无效，则不会应用任何过滤器。

blur（）：图像模糊。
brightness（）：图像变亮或变暗。
contrast（）：图像的对比度增加或减少。
drop-shadow（）：在图像后面应用投影。
grayscale（）：转换为灰度的图像。
hue-rotate（）：改变图像的色相。
invert（）：图像的颜色倒置。
opacity（）：图像透明。
saturate（）：输入图像是过饱和或不饱和的。
sepia（）：图像转换为棕褐色。

语法


 <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>

CSS <filter-function> - 模糊图像

以下示例演示了如何使用 blur（） 滤镜函数对图像进行模糊处理：


<html>
<head>
<style>
	 	.blur-image {
	 	 	 filter: blur(8px);
	 	}
	 	.box {
	 	 	 background: url(images/orange-flower.jpg) no-repeat center;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	}
</style>
</head>
<body>
	 	<h2><filter-function> - blur()</h2>
	 	<p>No blur</p>
	 	<div class="box"></div>
	 	<p>Blurred</p>
	 	<div class="box blur-image"></div>
</body>
</html>

CSS <filter-function> - 使图像变亮

以下示例演示了如何使用 brightness（） 滤镜函数来增加或减少图像的亮度：


<html>
<head>
<style>
	 	.bright-image-inc{
	 	 	 filter: brightness(180%);
	 	}

	 	.bright-image-dec {
	 	 	 filter: brightness(50%);
	 	}

	 	.box {
	 	 	 background: url(images/orange-flower.jpg) no-repeat center;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	}
</style>
</head>
<body>
	 	<h2><filter-function> - brightness()</h2>
	 	<p>Normal</p>
	 	<div class="box"></div>
	 	<p>Brightness Increased</p>
	 	<div class="box bright-image-inc"></div>
	 	<p>Brightness Decreased</p>
	 	<div class="box bright-image-dec"></div>
</body>
</html>

CSS <filter-function> - 更改图像的对比度

以下示例演示了如何使用 contrast（） 滤镜函数来更改图像的对比度：


<html>
<head>
<style>
	 	.contrast-image-inc{
	 	 	 filter: contrast(250%);
	 	}

	 	.contrast-image-dec {
	 	 	 filter: contrast(25%);
	 	}

	 	.box {
	 	 	 background: url(images/red-flower.jpg) no-repeat center;
	 	 	 width: 200px;
	 	 	 height: 200px;
	 	}
</style>
</head>
<body>
	 	<h2><filter-function> - contrast()</h2>
	 	<p>Normal</p>
	 	<div class="box"></div>
	 	<p>Contrast Increased</p>
	 	<div class="box contrast-image-inc"></div>
	 	<p>Contrast Decreased</p>
	 	<div class="box contrast-image-dec"></div>
</body>
</html>

有关过滤器功能的更多示例，请参阅过滤器页面。

打印本页