cssクリップが動作していません

私は親と子のCSSの位置にいくつかの異なる順列を試しました。私は3セルのスプライトシートを持っています。背景画像のトリックを使用するいくつかの古いコードがあり、クリップを使用するように更新しようとしています：rect（）in 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）を調整することができるでしょうabsoluteにあなたの画像の位置を変更、その後、rect(top, right, bottom, left)にクリップ値を変更することもできます。 spanブロックのサイズとスプライトのサイズに基づいて、top/leftを計算する必要があります。

ここは例です。

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

を見つけることができます：-189pxが必要とされています。私はクリップがすべての世話をすることを期待していた。 – Darian311

私はそれを今得ます。クリップ矩形パラメータは、基礎となる画像をまったく移動しません。あなたは依然としてcss leftとtopを使用して位置決めする必要があります。 – Darian311

それがどのように機能するのですか？ –

cssクリップが動作していません

答えて

関連する問題