CSS 기본 튜토리얼 필터 효과

1. 알파 필터

구문:

{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}

"Alpha" 속성은 대상 요소를 배경과 혼합하는 것입니다. . 디자이너는 숫자 값을 지정하여 혼합 정도를 제어할 수 있습니다. 이러한 "배경과의 혼합"은 구어적으로 요소의 투명도라고 알려져 있습니다. 좌표를 지정하여 점, 선, 표면의 투명도를 지정할 수 있습니다.

각 매개변수의 의미는 다음과 같습니다.

"opacity"는 투명도 수준을 나타냅니다. 기본 범위는 0~100이며 실제로는 백분율입니다. 즉, 0은 완전히 투명함을 나타내고 100은 완전히 불투명함을 나타냅니다.

"finishopacity"는 선택 매개변수입니다. 그라디언트의 투명도 효과를 설정하려면 마지막에 투명도를 지정하는 데 사용할 수 있습니다. 범위도 0~100입니다.

"style" 매개변수는 투명 영역의 모양 특성을 지정합니다. 그 중 0은 균일한 모양을 나타내고, 1은 선형 모양을 나타내고, 2는 방사형 모양을 나타내고, 3은 직사각형을 나타냅니다.

"STARTX" 및 "STARTY"는 그라데이션 투명도 효과의 시작 X 및 Y 좌표를 나타냅니다.

"FINISHX" 및 "FINISHY"는 그라디언트 투명 효과 끝의 X 및 Y 좌표를 나타냅니다.

효과는 다음과 같습니다.

2. 흐림 필터

구문: HTML의 경우:

{ilter:blur(add=add,direction=direction,strength=strength)}

스크립트 언어의 경우:

[oblurfilter=] object.filters.blur

아직 마르지 않은 유화 위에 손가락을 빠르게 슬라이드하면 그림이 흐려집니다. . "Blur"는 동일한 흐림 효과를 생성합니다.
"ADD" 매개변수는 부울 판단 "TRUE(기본값)" 또는 "FALSE"입니다. 그림이 인상적인 흐림 효과로 변경되는지 여부를 지정합니다. 흐림 효과는 시계 방향으로 수행됩니다.

"DIRECTION" 매개변수는 흐림 방향을 설정하는 데 사용됩니다. 여기서 0도는 수직 위쪽을 나타내고 45도마다 단위가 됩니다. 기본값은 왼쪽으로 270도입니다.

"STRENGTH" 값은 흐림의 영향을 받는 너비의 픽셀 수를 나타내는 정수를 통해서만 지정할 수 있습니다. 기본값은 5입니다.

웹페이지 글꼴의 경우 흐림 효과를 "ADD=1"로 설정하면 해당 글꼴의 효과가 매우 아름답습니다. 다음과 같습니다:

filter:blur(add=ture,direction=135,strength=10）

당신에게 날아갑니다. 비는 부드럽게 내립니다!

3. FlipH, FlipV 필터

구문: {filter:filph}, {filter:filpv}는 각각 수평 반전 및 수직 반전입니다. 다음:

4、Chroma 滤镜

语法：

{filter:chroma(color=color)}

       使用”Chroma"属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。下面是兰色文字，然后用Chroma 滤镜过滤掉兰色，就成了下面的样子。

filter:chroma(color=blue)

滴水檐坊

5、DropShadow 滤镜

语法：

{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}

“DropShaow"顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上较深。

"Color"代表投射阴影的颜色，"offx"和"offy"分别是X方向和Y方向阴影的饿偏移量。

"Positive"参数是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。

如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果

正常文字	dropshadow(color=gray,offx=5,offy=5.positive=0)后的文字

6、Glow 滤镜

语法：

{filter:glow(color=color,strength)}

当对一个对象使用"glow"属性后，这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色，“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。
filter:glow(color=red,strength=10) 后的效果

滴水檐茶坊

filter:glow(color=#ffff00,strength=5) 后的效果

滴水檐茶坊

好象可以把PhotoShop踹到一边了，是吗？

以上就是css基础教程之滤镜效果的内容，更多相关内容请关注PHP中文网（www.php.cn）！