CSS로 원하는 부분만 보여주는 이미지(Image Clipping)
Image clipping(큰 이미지에서 내가 원하는 부분만 보여주는 기술)
background-image를 사용하지 않고 img를 이용한 image clipping 방법에 대해
고려 한것입니다.
background-image를 이용한 clipping을 사용하게 되면 IE에서 인쇄시 이미지가 출력되지 않는 문제가 발생합니다.
IMG를 이용한 Clipping 예제 소스:
CSS:
.menu-about { width: 106px; height: 29px; position: relative; top: 0; left: -293px; }
.menu-about img { position: absolute; clip: rect(0 399px 29px 293px); }
HTML:
<div class="menu-about">
<img class="transparent_png" src="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png" alt="About" title="About Us" width="611" height="39" />
</div>
출처 - http://target2u.blogspot.com/2008/12/css-image-clipping.html
'Development > CSS' 카테고리의 다른 글
CSS - !important (0) | 2012.05.31 |
---|---|
CSS - Font-Weight (0) | 2012.05.30 |
css - 마우스 오버시 변하는 버튼 (3) | 2012.05.29 |
css - 드롭다운 메뉴 (0) | 2012.05.29 |
CSS - 선택자 (0) | 2012.05.23 |