CSS에서 필터 속성을 사용하는 방법에 대한 심층적인 이해

이 글은 CSS 필터를 사용하는 방법에 대해서만 설명합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS 필터 사용 방법: 필터: 필터 이름(매개변수) 즉 필터: 필터 이름(매개변수)

alpha: 투명도 수준 설정
blur: 고속 이동 효과, 즉 흐림 효과 만들기
chroma: 특별한 색상을 투명하게 만듭니다.
DropShadow: 물체의 고정된 그림자 만들기
FlipH: 수평 거울 이미지 만들기
FlipV: 수직 거울 이미지 만들기
glow: 근처 물체의 외부에 빛 추가
gray: 이미지 그레이스케일
invert : 색상 반전
light: 만들기 광원이 개체에 있습니다
mask: 개체에 투명한 마스크 만들기
shadow: 오프셋 고정 그림자 만들기
wave: 잔물결 효과
Xray: 개체가 x에 의해 조명되는 것처럼 보이게 만듭니다. -rays

두 가지 구체적인 적용 방법이 있습니다.

1. 먼저 CSS를 정의한 다음 페이지의 필수 개체에 미리 정의된 CSS를 사용합니다. 실제로 이러한 필터의 구문은 CSS 설정 대화 상자에 미리 설정되어 있습니다. . 적절한 매개변수만 입력하면 됩니다.

2. CSS 필터 효과를 지원하는 HTML 컨트롤 요소에 CSS 필터 코드를 직접 작성합니다.

알파 필터: 이 이름을 들으면 플래시에 있다고 생각하실 수도 있고, 포토샵에서 본 것 같기도 합니다. 그렇습니다. 기본적으로 동일한 작업을 수행합니다. 즉, 대상 요소를 배경과 혼합하는 것입니다. 숫자 값을 지정하여 혼합 정도를 제어할 수 있습니다. 일반인의 관점에서 이 "배경과의 혼합"은 요소의 투명도입니다.

구문: STYLE="filter: Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX) =finishX , FinishY=finishY)"
지침:
불투명도: 시작 값(0~100 범위), 0은 투명, 100은 원본 이미지입니다.
FinishOpacity: 목표 값.
스타일: 1 또는 2 또는 3
StartX: 임의의 값
StartY: 임의의 값
예: 필터:Alpha(Opacity="0″,FinishOpacity="75″,Style="2″)

흐림 필터: 예 1 CSS 필터 중 텍스트에 로드하면 3차원 문자 효과를 생성할 수 있습니다. 이는 3차원 문자를 웹 페이지의 제목으로 사용하는 데 큰 편리함을 제공하고 웹 페이지의 무게도 줄여줍니다. 사진에 흐림 필터를 적용하면 사진을 더욱 다채롭게 만들 수 있습니다. 이미지 처리 소프트웨어를 사용하여 동일한 효과를 얻을 수 있지만 흐림 필터를 사용하는 것이 훨씬 더 편리합니다.

구문: ​​STYLE="filter:Blur (추가 = 추가, 방향 = 방향, 강도 = 강도)"
설명:
추가: 일반적으로 1 또는 0입니다.
방향: 각도, 0~315도, 단계 크기는 45도입니다.
강도: 효과 증가 값은 일반적으로 5이면 충분합니다.
예: filter:Blur(Add="1″,Direction="45″,Strength="5″)

색도 필터: 개체의 색상 강도 설정
구문: STYLE="filter:Chroma(색상 = 색상) ) "
설명: 색상: #rrggbb 형식, 모두.
예: filter:Chroma(Color="#FFFFFF")

DropShadow 필터: 이름에서 알 수 있듯이 개체에 그림자 효과를 추가합니다. 실제 효과는 원본 개체가 페이지를 떠나고 개체의 그림자가 페이지에 나타나는 것과 같습니다. 작동 원리는 오프셋을 설정한 다음 색상을 추가하는 것입니다.
Syntax: STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=plus)"
Description: Color:#rrggbb format , 어느.
Offx: X축 편차 값.
Offy: Y축 오프셋 값.
양수: 1 또는 0.
예: 필터:DropShadow(Color="#6699CC",OffX="5″,OffY="5″,Positive="1″)

FlipH 필터: 수평 반전 달성
구문: STYLE="필터: FlipH"
예: 필터:FlipH
FlipV 필터: 수직 반전을 달성하기 위한 필터
구문: STYLE="filter:FlipV"
예: 필터:FlipV

글로우 필터: 개체에 "글로우" 속성을 사용한 후 개체의 가장자리 이 개체는 빛나는 효과를 생성합니다
구문: STYLE="filter:Glow(Color=color, Strength=strength)"
설명:
Color: 빛나는 색상.
강도: 강도(0-100)
예: 필터:Glow(Color="#6699CC",Strength="5″)

회색 필터: 회색 필터를 사용하여 사진을 회색조 이미지로 바꿉니다

구문: STYLE="filter:Gray"
예: 필터:Gray

필터 반전: 이름에서 알 수 있듯이 개체를 반전합니다.
구문: STYLE="filter:Invert"
예: 필터:Invert

마스크 필터:"를 사용합니다. MASK" 속성은 물체의 표면을 덮는 필름을 생성합니다. 그 효과는 색안경을 통해 물체를 보는 것과 같습니다.
구문: STYLE="filter:Mask(Color=color)"
예: filter:Mask ( Color=" #FFFFE0")

그림자 필터: "그림자" 속성을 사용하여 지정된 방향으로 개체의 투영을 만듭니다. COLOR는 투영 색상이고 DIRECTION은 투영 방향입니다. 0도는 수직 위쪽을 나타내며 45도마다 하나의 단위입니다. 기본값은 왼쪽으로 270도입니다.

구문: ​​필터:그림자(색상=색상, 방향=방향)
설명:
색상: #rrggbb 형식.
방향: 각도, 0-315도, 단계 크기는 45도입니다.
예: 필터:그림자(색상="#6699CC", 방향="135″)

Wave 필터: 이름만 보면 효과를 짐작할 수 있겠지만, 그 기능은 물체를 수직 파형 스타일로 왜곡하여 특수 효과를 생성하는 것입니다.
구문: 필터: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)
Description:
Add: 일반적으로 1 또는 0입니다.
Freq: 변형 값.
LightStrength: 변형 비율.
Phase: 각도 변형 비율.
강도: 변형 강도.
예: 필터: wave(Add="0″, Phase="4″, Freq="5″, LightStrength="5″, Strength="2″)

Xray 필터 거울: 물체의 윤곽만 표시
Syntax: STYLE="filter:Xray"
예: filter:Xray

위 내용은 CSS에서 필터 속성을 사용하는 방법에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!