CSS clip 속성
정의와 사용법
clip 속성이 절대 정렬된 요소를 잘라냅니다.
이미지의 크기가 그를 포함하는 요소보다 크다면 무엇이 일어날까요? "clip" 속성은 요소의 보이는 크기를 정의할 수 있으며, 이 요소는 이 형태로 잘라내고 표시됩니다.
설명
이 속성은 하나의 잘라내기 사각형을 정의합니다. 절대 정의된 요소의 내용은 이 사각형 내에만 보입니다. 이 잘라내기 영역 밖의 내용은 overflow 값에 따라 처리됩니다. 잘라내기 영역은 내용 영역보다 크거나 작을 수 있습니다.
다른 것을 참조하세요:
CSS 강의:CSS 정렬
HTML DOM 참조 매뉴얼:clip 속성
CSS 문법
clip: auto|shape|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| shape | 요소의 형태 설정. 유일한 허용된 형태 값은: rect (top, right, bottom, left) |
| auto | 기본 값. 어떤 잘라내기도 적용되지 않습니다. |
| inherit | 부모 요소에서 clip 속성 값을 상속해야 합니다. |
기술 세부 사항
| 기본 값: | auto |
|---|---|
| 상속성: | no |
| 버전: | CSS2 |
| JavaScript 문법: | object.style.clip="rect(0px,50px,50px,0px)" |
더 많은 예제
- 요소의 형태 설정
- 이 예제에서는 요소의 형태를 설정하는 방법을 보여줍니다. 이 요소는 형태에 잘려지고 나서 표시됩니다.
브라우저 지원
표에서의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
| 크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
