> 웹 프론트엔드 > CSS 튜토리얼 > CSS 기본 튜토리얼 필터 효과

CSS 기본 튜토리얼 필터 효과

PHP中文网
풀어 주다: 2018-09-27 17:24:24
원래의
1905명이 탐색했습니다.

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 좌표를 나타냅니다.

효과는 다음과 같습니다.

CSS 기본 튜토리얼 필터 효과CSS 기본 튜토리얼 필터 효과
CSS 기본 튜토리얼 필터 효과CSS 기본 튜토리얼 필터 효과

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)
로그인 후 복사

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

CSS 기본 튜토리얼 필터 효과CSS 기본 튜토리얼 필터 효과
CSS 기본 튜토리얼 필터 효과CSS 기본 튜토리얼 필터 효과

3. FlipH, FlipV 필터

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

CSS 기본 튜토리얼 필터 효과水平反转 style=
垂直反转 style=先水平反转,然后垂直反转  style=

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)”,那么就为透明的像素部分建立透明效果

CSS 기본 튜토리얼 필터 효과dropshadow(color=gray,offx=5,offy=5.positive=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)!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿