CSS 클립 속성
예시
이미지 자르기:
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
정의 및 사용
이미지가 포함하는 요소보다 크면 어떻게 됩니까?
clip속성을 사용하면 절대 위치에 있는 요소를 자르기 위해 사각형을 지정할 수 있습니다 . 사각형은 4개의 좌표로 지정되며 모두 클리핑할 요소의 왼쪽 위 모서리에서 시작됩니다.
참고:clip "overflow:visible"인 경우 속성이 작동하지 않습니다 .
참고: 이 clip속성은 더 이상 사용되지 않으며 향후 속성으로 대체됩니다.
clip-path
| 기본값: | 자동 |
|---|---|
| 상속: | 아니요 |
| 애니메이션 가능: | 예. 애니메이션 가능 에 대해 읽기 |
| 버전: | CSS2 |
| 자바스크립트 구문: | 개체 .style.clip="rect(0px,50px,50px,0px)" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| clip | 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
CSS 구문
clip: auto|shape|initial|inherit;
속성 값
| Value | Description | Play it |
|---|---|---|
| auto | No clipping will be applied. This is default | |
| shape | Clips an element. The only valid value is: rect (top, right, bottom, left) | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
관련 페이지
CSS 튜토리얼: CSS 포지셔닝
HTML DOM 참조: 클립 속성