开发手册 欢迎您！
软件开发者资料库

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

CSS过滤器文本和图像效果 - 面向初学者和高级开发人员的CSS教程使用示例，通过简单易用的步骤学习层叠样式表。 CSS2和CSS3属性的完整参考手册。

您可以使用CSS过滤器在不使用图像或其他图形的情况下为网页的文本，图像和其他方面添加特殊效果. 过滤器仅适用于Internet Explorer 4.0 .如果您正在为多个浏览器开发您的网站，那么使用CSS过滤器可能不是一个好主意，因为它可能不会带来任何好处.

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

Alpha通道

Alpha通道过滤器会改变对象的不透明度，使其融入背景.可以在此过滤器中使用以下参数 :

Sr.No.参数&说明
1

不透明度

不透明度的级别. 0是完全透明的，100是完全不透明的.

2

finishopacity

对象另一端的不透明度等级.

3

样式

不透明度渐变的形状.

0 =均匀

1 =线性

2 =径向

3 =矩形

4

startX

不透明度的X坐标渐变开始.

5

startY

开始使用不透明度渐变的Y坐标.

6

finishX

不透明度渐变的X坐标结束.

7

finishY

不透明度渐变的Y坐标结束.

示例

                  
Image Example:
                  
Text Example:
            CSS Tutorials
   

Motion Blur

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

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.

Example

                  
Image Example:
                        
Text Example:
            CSS Tutorials      
   

Chroma Filter

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

Sr.No.Parameter & Description
1

color

The color that you'd like to be transparent.

Example

                  
Image Example:
                        
Text Example:
            CSS Tutorials   

Drop Shadow Effect

投影用于在指定的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.

Example

                  
Image Example:
                        
Text Example:
            CSS Tutorials   

Flip Effect

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

Sr.No.Parameter & Description
1

FlipH

Creates a horizontal mirror image

2

FlipV

Creates a vertical mirror image

Example

                  
Image Example:
                                    
Text Example:
            CSS Tutorials   

Glow Effect

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

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).

Example

                  
Image Example:
                        
Text Example:
            CSS Tutorials   

Grayscale Effect

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

Sr.No.Parameter & Description
1

grayscale

Converts the colors of the object to 256 shades of gray.

Example

                  
Image Example:
                        
Text Example:
            CSS Tutorials   

Invert Effect

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

Sr.No.Parameter & Description
1

Invert

Maps the colors of the object to their opposite value in the color spectrum.

Example

                  
Image Example:
                        
Text Example:
            CSS Tutorials   

Mask Effect

蒙版效果用于将透明像素转换为指定颜色，并使不透明像素透明。 此过滤器中使用以下参数:

Sr.No.Parameter & Description
1

color

The color that the transparent areas will become.

Example

                  
Image Example:
                        
Text Example:
            CSS Tutorials         

Shadow Filter

阴影滤镜用于在指定的方向和颜色上创建衰减阴影。 这是一个位于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

Example

                  
Image Example:
                        
Text Example:
            CSS Tutorials         

Wave Effect

波浪效应用于使物体产生正弦波失真，使其看起来呈波浪状。 可以在此过滤器中使用以下参数:

Sr.No.Parameter & Description
1

add

值为1会将原始图像添加到波形图像，0则不会。

2

freq

波数。

3

light

波浪上的光强（从0到100）。

4

phase

正弦波应该在多大程度上开始（从0到100）。

5

strength

波浪效应的强度。

Example

                  
Image Example:
                        
Text Example:
            CSS Tutorials         

X-Ray Effect

X射线效果灰度和颜色深度变平。 此过滤器中使用以下参数:

Sr.No.Parameter & Description
1

xray

灰度和颜色深度变平。

Example

                  
Image Example:
                        
Text Example:
            CSS Tutorials