이미지 잘라내기 CSS 예제

위와 같은 이미지가 있고, <p class=”crop”><img src=”runner_count.png” /></p> 와 같이 이용한다.
이때 CSS를 이용하면 아래와 같이 각각의 필요한 부분만 뽑아낼 수 있다.

.crop {
float: left;
overflow: hidden;
}
.crop img {
margin:-10px 0px -10px 0px;
}

위와 같이하면 녹색볼이 표시된다.

.crop {
float: left;
overflow: hidden;
}
.crop img {
margin:0px 0px -25px 0px;
}

위와 같이하면 노란볼이 표시된다.

.crop {
float: left;
overflow: hidden;
}
.crop img {
margin:-20px 0px 0px 0px;
}

위와 같이하면 빨간볼이 표시된다.

This entry was posted in 未分類. Bookmark the permalink.