"bijin16.jpg" から一部の画像を切り取って描画します。
  1. "bijin16.jpg" は 60*60 の Sprite を４行４列に並べた画像です。


  2. img タグの style で画像の一部を切り取ります。
    clip:rect(0px,60px,60px,0px) が切り取る矩形で「上, 右, 下, 左」の順に指定します。
    position:absolute;left:40px;top:40px; が画像を描画する座標です。
    <img src="bijin16.jpg" style="clip:rect(0px,60px,60px,0px);
  position:absolute;left:40px;top:40px;">

  3. 続いて二枚目の画像を切り取って描画します。
    clip:rect(60px,240px,120px,180px)で、左上の座標(X:180, Y:60)から右下の座標(X:240, Y:120)の範囲を切り取ります。
    position:absolute;left:-40px;top:-20px; が画像を描画する座標ですが、切り取る前の全体画像の左上座標を基点に指定します。
    今回の場合は、X:-40 にすると切り取る Sprite の左上Ｘ座標が 180 なので -40+180=140 から描画されます。
    同様に Y:-20 にすると切り取る Sprite の左上Ｙ座標が 60 なので -20+60=40 から描画されます。
    <img src="bijin16.jpg" style="clip:rect(60px,240px,120px,180px);
  position:absolute;left:-40px;top:-20px;">