2014년 4월 27일 일요일

CSS clip

clip 
원하는 영역만 보여주기.

적용방법
-기본값은 clip:auto
-clip:rect(top right bottom left);
-기준점은 top과 left
-bottom의 값은 top에서부터 보이고자하는 영역의 높이값.
-right 값은 left에서부터 보이고자하는 영역의 가로값
-요소에 position의 'absolute'나 'fixed'(절대위치)를 가지면 적용되지 않는다.

 
<style type="text/css">
.clipBox {
position:relative;
width:320px;
height:414px;
}
img {
position:absolute;
clip:rect(25px 240px 220px 70px);
}
</style>

<div class="clipBox">
<img src="image/clipImg.jpg" width="320" height="414">
</div>

결과