X-Ray(엑스레이) 효과는 요소에 적용하면 이미지나 텍스트를 그레이스케일(흑백)로 변환하고, 색상의 깊이를 평면화하여 마치 엑스레이 촬영 이미지처럼 보이게 만드는 CSS 필터입니다.
필터 매개변수
X-Ray 효과에 사용되는 매개변수는 다음과 같습니다.
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | Xray 요소를 그레이스케일로 변환하고 색상 깊이를 평면화합니다. |
사용 예제
다음 코드를 실행하면 이미지와 텍스트에 X-Ray 효과를 적용한 결과를 확인할 수 있습니다.
<html> <head> </head> <body> <img src="/css/images/logo.png" alt="CSS Logo" style="Filter: Xray" /> <p>텍스트 예제:</p> <div style="width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: Xray;">CSS Tutorials</div> </body> </html>
코드 설명
- 이미지 태그에
style="Filter: Xray"속성을 직접 지정하여 로고 이미지에 엑스레이 효과를 적용했습니다. - div 요소에는 너비, 높이, 글꼴 크기 등의 스타일과 함께
Filter: Xray를 지정하여 빨간색 텍스트가 흑백으로 반전된 효과를 나타냅니다.
참고: 이러한 Filter 속성은 구형 Internet Explorer에서 지원되던 비표준 방식입니다. 최신 브라우저에서는 CSS 표준인 filter: grayscale(1) invert(1) 등의 함수를 사용하는 것이 좋습니다.