clip 속성

clip 속성을 사용하면 절대 위치 지정된 요소를 잘라내어 지정된 직사각형 영역만 보이게 할 수 있습니다. 값은 rect 함수를 사용하여 설정합니다.

구문

css선택자 {
  clip: rect(위, 오른쪽, 아래, 왼쪽) | auto;
}

이미지 준비

잘라낼 자연 풍경 이미지가 있다고 가정해 봅시다:

html<img src="image.jpg" width="500">

Результат:

예시

이미지를 잘라 중앙 부분만 보이도록 해봅시다:

html<div class="container">
  <img class="image" src="image.jpg">
</div>

css.container {
  position: relative;
  width: 400px;
  height: 300px;
}
.image {
  position: absolute;
  clip: rect(50px, 350px, 250px, 50px);
  width: 400px;
  height: 300px;
}

Результат:

같이 보기