CSS过滤器-文本和图像效果

📌 相关文章

📜 CSS过滤器-文本和图像效果

📅 最后修改于: 2020-10-26 04:52:47 🧑 作者: Mango

您可以使用CSS过滤器将特殊效果添加到文本，图像和网页的其他方面，而无需使用图像或其他图形。筛选器仅在Internet Explorer 4.0上起作用。如果要为多个浏览器开发站点，则使用CSS筛选器可能不是一个好主意，因为它可能不会带来任何好处。

在本章中，我们将看到每个CSS过滤器的详细信息。这些过滤器可能无法在您的浏览器中使用。

阿尔法频道

Alpha通道滤镜可更改对象的不透明度，从而使其融合到背景中。以下参数可以在此过滤器中使用-

Sr.No.	Parameter & Description
1	opacity Level of the opacity. 0 is fully transparent, 100 is fully opaque.
2	finishopacity Level of the opacity at the other end of the object.
3	style The shape of the opacity gradient. 0 = uniform 1 = linear 2 = radial 3 = rectangular
4	startX X coordinate for opacity gradient to begin.
5	startY Y coordinate for opacity gradient to begin.
6	finishX X coordinate for opacity gradient to end.
7	finishY Y coordinate for opacity gradient to end.

例

现场演示

Image Example:
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

运动模糊

运动模糊用于创建具有方向和强度的模糊图片或文本。以下参数可以在此过滤器中使用-

Sr.No.	Parameter & Description
1	add True or false. If true, the image is added to the blurred image; and if false, the image is not added to the blurred image.
2	direction The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left
3	strength The number of pixels the blur will extend. The default is 5 pixels.

Sr.No.

Parameter & Description

add

True or false. If true, the image is added to the blurred image; and if false, the image is not added to the blurred image.

direction

The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).

0 = Top

45 = Top right

90 = Right

135 = Bottom right

180 = Bottom

225 = Bottom left

270 = Left

315 = Top left

strength

The number of pixels the blur will extend. The default is 5 pixels.

例

现场演示

Image Example:
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

色度过滤器

色度滤镜用于使任何特定颜色透明，通常与图像一起使用。您也可以将其与滚动条一起使用。以下参数可以在此过滤器中使用-

Sr.No.	Parameter & Description
1	color The color that you’d like to be transparent.

例

现场演示

Image Example:
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

投影效果

阴影用于在指定的X（水平）和Y（垂直）偏移和颜色处为对象创建阴影。

以下参数可以在此过滤器中使用-

Sr.No.	Parameter & Description
1	color The color, in #RRGGBB format, of the dropshadow.
2	offX Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left.
3	offY Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up.
4	positive If true, all opaque pixels of the object have a dropshadow. If false, all transparent pixels have a dropshadow. The default is true.

例

现场演示

Image Example:
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

翻转效果

翻转效果用于创建对象的镜像。以下参数可以在此过滤器中使用-

Sr.No.	Parameter & Description
1	FlipH Creates a horizontal mirror image
2	FlipV Creates a vertical mirror image

Sr.No.

Parameter & Description

FlipH

Creates a horizontal mirror image

FlipV

Creates a vertical mirror image

例

现场演示

Image Example:
      
      
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

发光效果

发光效果用于在对象周围创建发光。如果它是透明图像，则会在其不透明像素周围创建光晕。以下参数可以在此过滤器中使用-

Sr.No.	Parameter & Description
1	color The color you want the glow to be.
2	strength The intensity of the glow (from 1 to 255).

Sr.No.

Parameter & Description

color

The color you want the glow to be.

strength

The intensity of the glow (from 1 to 255).

例

现场演示

Image Example:
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

灰度效果

灰度效果用于将对象的颜色转换为256个灰度阴影。在此过滤器中使用以下参数-

Sr.No.	Parameter & Description
1	grayscale Converts the colors of the object to 256 shades of gray.

例

现场演示

Image Example:
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

反转效果

反转效果用于将对象的颜色映射到色谱中它们的相反值，即创建负像。在此过滤器中使用以下参数-

Sr.No.	Parameter & Description
1	Invert Maps the colors of the object to their opposite value in the color spectrum.

例

现场演示

Image Example:
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

遮罩效果

遮罩效果用于将透明像素变为指定的颜色，并使不透明像素透明。在此过滤器中使用以下参数-

Sr.No.	Parameter & Description
1	color The color that the transparent areas will become.

例

现场演示

Image Example:
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

阴影滤镜

阴影滤镜用于在指定的方向和颜色上创建衰减的阴影。这是位于Dropshadow和Glow之间的过滤器。以下参数可以在此过滤器中使用-

Sr.No.	Parameter & Description
1	color The color that you want the shadow to be.
2	direction The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left). 0 = Top 45 = Top right 90 = Right 135 = Bottom right 180 = Bottom 225 = Bottom left 270 = Left 315 = Top left

Sr.No.

Parameter & Description

color

The color that you want the shadow to be.

direction

The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).

0 = Top

45 = Top right

90 = Right

135 = Bottom right

180 = Bottom

225 = Bottom left

270 = Left

315 = Top left

例

现场演示

Image Example:
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

波浪效应

波浪效应用于使对象产生正弦波失真，使其看起来呈波浪形。以下参数可以在此过滤器中使用-

Sr.No.	Parameter & Description
1	add A value of 1 adds the original image to the waved image, 0 does not.
2	freq The number of waves.
3	light The strength of the light on the wave (from 0 to 100).
4	phase At what degree the sine wave should start (from 0 to 100).
5	strength The intensity of the wave effect.

例

现场演示

Image Example:
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-

X射线效应

X射线效果可灰阶并弄平颜色深度。在此过滤器中使用以下参数：

Sr.No.	Parameter & Description
1	xray Grayscales and flattens the color depth.

例

现场演示

Image Example:
      
      
      
      Text Example:
      
      CSS Tutorials

它将产生以下结果-