clip
clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. position 속성값이 absolute 또는 fixed일 때만 적용됩니다.
기본형
clip : auto | shape
- auto : 요소의 모든 부분이 나옵니다.
- shape : 특정 부분이 나오도록 합니다.
shape에서 특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 부분을 정합니다.
clip: rect( top, right, bottom, left );
- top : 위를 기준으로 시작하는 위치
- right : 왼쪽을 기준으로 끝나는 위치
- bottom : 위를 기준으로 끝나는 위치
- left : 왼쪽을 기준으로 시작하는 위치
예제
- 이미지의 일부만 보여주는 예제입니다.
- 사용한 이미지의 크기는 540x360입니다.
<img src="//bit.ly/2I4rvsj" class="lb-img"/>
.lb-img {
position: absolute;
clip: rect( 0, 200px, 200px, 0);
}