Skip to content

image clip

2019.07.06 16:47

WHRIA 조회 수:2350

http://www.nuno21.net/bbs/board.php?bo_table=html&wr_id=1289

 

 

개요

clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다.

  • 기본값 : auto
  • 상속 : No
  • 애니메이션 : Yes
  • 버전 : CSS Level 2

문법

  • auto : 요소의 모든 부분이 나옵니다.
  • shape : 특정 부분이 나오도록 합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

특정 부분만 나오게 할 때는 다음과 같은 코드로 나오는 부분을 정합니다.

  • <top> : 위를 기준으로 시작하는 위치
  • <right> : 왼쪽을 기준으로 끝나는 위치
  • <bottom> : 위를 기준으로 끝나는 위치
  • <left> : 왼쪽을 기준으로 시작하는 위치

position 속성값이 absolute 또는 fixed일 때만 적용됩니다.

 

 

예제

이미지의 일부만 보여주는 예제입니다. 사용한 이미지의 크기는 450x300입니다.

브라우저 지원

  • Chrome : 1.0+
  • Firefox : 1.0+
  • Internet Explorer : 8.0+
  • Opera : 7.0+
  • Safari : 1.0+



CSS로 이미지의 원하는 부분만 잘라서 보여주는 방법 (Image Clipping)

CSS로 이미지의 원하는 부분만 잘라서 보여주는 방법 (Image Clipping)


css를 활용하여 하나의 이미지에서 원하는 부분만 잘라서 보여주는 방법을 소개 해드릴까 합니다.

 

위 방법은 Image Clipping 이라는 기술인데요 background-image 태그를 사용하지 않고 img 태그를 이용한

방법으로 하였습니다.

background-image 를 활용하게 되면 익스플로러에서 인쇄를 할때 이미지가 출력이 안될 수 있다는 단점이 있습니다만

페이지를 모두 출력해서 사용 하는 것은 아니니 크게 상관은 없겠죠?

 

css

 .menu { width: 500px; height: 500px; position: relative; top: 0; left: -100px }
.menu img { position: absolute; clip: rect(0 299px 29px 193px) }

 

 

 html

 <div class="menu">
     <img src="menu.png" alt="menu" title="menu" width="490" height="490" />
</div>

 

 

번호 제목 글쓴이 날짜 조회 수
1596 python pdf writer WHRIA 2019.11.04 303
1595 distributed training [2] WHRIA 2019.10.30 67
1594 MXNET SSD WHRIA 2019.09.04 83
1593 2016 ilsvrc WHRIA 2019.08.31 78
1592 open new mate terminal WHRIA 2019.08.11 92
1591 mariaDB cache 설정 WHRIA 2019.08.04 270
1590 crontab 사용법 WHRIA 2019.08.04 678
1589 python with upload WHRIA 2019.07.28 834
1588 yolo custom WHRIA 2019.07.25 147
1587 stuff [2] WHRIA 2019.07.16 151
1586 batch normalization explain WHRIA 2019.07.14 433
1585 결극 senet 이 문제 WHRIA 2019.07.13 82
1584 은행은 믿을 곳이 못 되는군... WHRIA 2019.07.12 126
» image clip [1] WHRIA 2019.07.06 2350
1582 윈도우 파일 검색 옵션 WHRIA 2019.06.14 97

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소