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