CSS 클립 속성에 대한 간략한 분석

클립 속성은 상대적으로 유용한 속성이지만 실제 응용 프로그램에서는 드문 경우가 많으며 52CSS.com에서는 이 속성을 거의 소개하지 않습니다. 클립 속성을 적용할 때 주의할 두 가지 사항은 다음과 같습니다.
1. 클립 속성은 위치 지정 속성 위치와 함께 사용해야 적용됩니다.
2. 클립 크로핑의 계산 좌표는 그림 3과 같이 왼쪽 상단, 즉 (0,0) 지점부터 계산됩니다. 이는 양쪽의 오른쪽 여백과 아래쪽 여백과 다릅니다. 가장 오른쪽 지점부터 계산됩니다.

클립 속성의 기본 구문:


클립 속성 설명:
객체의 가시 영역을 검색하거나 설정합니다. 보기 영역 외부의 부분은 투명합니다.
이 속성은 절대 위치에 있는 객체의 가시 영역 크기를 정의합니다. 이 속성을 사용하려면 position 속성의 값을 절대값으로 설정해야 합니다.
이 속성은 IE5부터 MAC 플랫폼에서 사용할 수 있습니다.
해당 스크립트 속성은 클립입니다.
컬러 텍스트를 만드는 것 외에도 CSS의 클립 속성은 다른 웹페이지의 요소를 효과적으로 자를 수도 있습니다.

클립 속성은 요소의 모양을 설정합니다. 이 속성은 클리핑 사각형을 정의하는 데 사용됩니다. 이 직사각형 내의 콘텐츠만 표시되며, 이 클리핑 영역 외부의 콘텐츠는 Overflow:hidden과 동일한 효과를 갖습니다. 클리핑 영역은 요소의 콘텐츠 영역보다 크거나 작을 수 있습니다.
클립 속성 값: auto | ect(상단, 오른쪽, 하단, 왼쪽)
자동은 자르지 않음을 의미합니다. 사각형의 네 방향은 자르기 위치를 나타내는 숫자 값으로 채워져야 합니다.
아래에서는 이미지 자르기에 대한 간단한 예를 보여 드리겠습니다.
먼저 그림 1과 같이 사진을 준비합니다. 크기는 159px*99픽셀입니다. 이미지에서 큰 빨간 점만 표시되도록 이미지를 자르는 데 클립 속성을 사용할 계획입니다.
먼저 이미지를 배치할 div 프레임을 만듭니다. 해당 CSS는 다음과 같이 정의됩니다.


이 div의 positioning 속성은 이미지의 위치 지정 기준으로 사용하기 위해 상대 위치 지정으로 설정되어 있으며 표시 효과를 보다 명확하게 하기 위해 배경을 #FFF985로 정의합니다.
그런 다음 이미지의 자르기 속성을 정의합니다. CSS 정의는 다음과 같습니다.


여기서 절대 위치 지정은 id가 imgClip인 div를 기준으로 합니다. 클립의 값은 위쪽, 오른쪽, 아래쪽, 왼쪽의 순서로 배열됩니다.
HTML 코드: