HTMLソースのCSSスプライト代替

Question

HTMLソースの<img>タグのソースを大きな画像の部分画像に設定する方法はありますか？私はCSSの中でbackground-position: 0px -76px;のようなものでこれを行うことができることを知っていますが、<img>と<input type="image">のためにどうすればいいですか？

EDIT：Chromeからのスクリーンショット：大きな画像から部分画像に<img srcを設定

Answer 1

？道はない。

あなたはすでに回答があります：background CSSプロパティを使用して、希望する座標に配置します。注：はの場合は、<img>タグに背景画像を割り当てます。ただ、キックのため

、代替ソリューションとして：あなたは、座標とサイズを含むクエリ文字列を使用して画像を追加することもできます

<img src="/my_image.jpg?x=400&y=220&width=200&height=120"> 

...その後、サーバ側にこの要求を送信するために.htaccessを使用画像を処理し、部分画像を出力するスクリプト（ただし、それは別のトピックです）。この投稿は.htaccess少しであなたを助けるかもしれない

、あなたはそれを実装することを選択する必要があります：あなたはCSSスプライトを使用するように

• RewriteRule for image file requests only if a query string is present

それは本当に音がいくつかありますこの上のチュートリアル、ここでは一つだ：

• http://css-tricks.com/css-sprites/

Answer 2

イメージを上下に拡大しない限り、単にカントを置くだけです。

overflow:hiddenの外側スパンを使用して、画像のサイズを設定します。

span.thumb 
{ 
width:120px; 
height:70px; 
overflow: hidden; 
} 

ような何かこのspan

Answer 3

内の画像を入れて、あなたはおそらく<img>よりも小さい<div>でそれをラップする必要があり、その後、top:y;オフセット画像のセットかでしょうmargin-top: y;