css 클립이 작동하지 않습니다.

부모와 자식의 CSS 위치에서 여러 가지 순열을 시도했습니다. 3 셀이있는 스프라이트 시트가 있습니다. 배경 이미지 트릭을 사용하는 몇 가지 오래된 코드가 있고 클립을 사용하도록 업데이트하려고합니다 : rect() css. 이상적으로는 디스플레이 크기를 제어하는 범위가 있습니다. 이미지의 CSS 속성 조합은 올바른 셀을 가져옵니다. 내가 여기서 무엇을 놓치고 있니?css 클립이 작동하지 않습니다.

<html> 
    <head> 
     <style> 
     .marketItemImage{ 
      display: inline-block; 
      width: 100px; 
      height: 104px; 
      border: 3px solid black; 
      overflow: hidden; 
     } 
     img { 
      clip: rect("0px 300px 104px 200px"); 
     } 
     </style> 
    </head> 
    <body> 
     <span class="marketItemImage"> 
      <img src="http://villagegamedev2.appspot.com/client/assets/textures/sprites/plantsSmall.png" /> 
     </span> 
    </body> 
</html>

출처

2016-07-07 Darian311

글쎄, 당신은 그래서 당신은 자유롭게 위치 (left/top)를 조정 할 수 있습니다 다음, rect(top, right, bottom, left)에 클립 값을 변경 absolute에 이미지의 위치를 변경할 수 있습니다. 그런 다음 span 블록의 크기와 스프라이트 크기에 따라 top/left을 계산해야합니다.

다음은 예입니다. -189px이 필요 :

clip 재산에 대한 몇 가지 기본 정보는 여기 http://www.w3schools.com/cssref/pr_pos_clip.asp

.marketItemImage { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 104px; 
 
    border: 3px solid black; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    position: absolute; 
 
    left: -189px; 
 
    clip: rect(0px, 300px, 104px, 200px); 
 
}

<span class="marketItemImage"> 
 
      <img src="http://villagegamedev2.appspot.com/client/assets/textures/sprites/plantsSmall.png" /> 
 
     </span>

출처

2016-07-07 01:37:21

나는 왼쪽을 놀라게 해요 찾을 수 있습니다. 나는 모든 것을 처리하기 위해 클립을 기대하고 있었다. – Darian311

좋아, 이제 알았다. 클립 rect 매개 변수는 기본 이미지를 전혀 움직이지 않습니다. 당신은 여전히 자리를 위해 왼쪽과 위 CSS를 사용해야합니다. – Darian311

예. 그것이 작동하는 방법입니다. –

css 클립이 작동하지 않습니다.

답변

관련 문제