clip 속성
clip 속성을 사용하면 절대 위치 지정된 요소를 잘라내어 지정된 직사각형 영역만 보이게 할 수 있습니다.
값은 rect 함수를 사용하여 설정합니다.
구문
선택자 {
clip: rect(위, 오른쪽, 아래, 왼쪽) | auto;
}
이미지 준비
잘라낼 자연 풍경 이미지가 있다고 가정해 봅시다:
<img src="image.jpg" width="500">
:
예시
이미지를 잘라 중앙 부분만 보이도록 해봅시다:
<div class="container">
<img class="image" src="image.jpg">
</div>
.container {
position: relative;
width: 400px;
height: 300px;
}
.image {
position: absolute;
clip: rect(50px, 350px, 250px, 50px);
width: 400px;
height: 300px;
}
:
