0

このリンク（http://jquerytools.org/media/img/demo-navi.jpg）にあるような画像シートが1つあります。

その画像のコンポーネントのみを取得したいと思います。

CSSで画像のコンポーネントのみを取得するにはどうすればよいですか？

4

4 に答える 4

3

正しい用語はCSSSpriteです。

これは、バックグラウンドポジショニングを使用して実現できます。

div
{
    background-image:url('http://jquerytools.org/media/img/demo-navi.jpg');
    background-position:-20px 80px;
    width:100px;
    height:80px;
}​​​

http://jsfiddle.net/Lz46r/

于 2012-05-16T10:14:56.647 に答える
1

あなたはこれを試すことができます：http：//www.guistuff.com/css/css_imagetech1.html

XとYのトリミング

その最初の画像は一種のソフトボールでした。すべてのクールな子供たちは、両方の軸で画像をトリミングする方法を知っています。これを行う理由はいくつかあります。たとえば、さまざまなサイズの画像があり、それらすべてを1つのファイル内に配置したい場合があります。1つの軸のみをトリミングする場合は、使用する画像の配列の可能な限り最大の幅または高さでファイルを保存することになります。また、同じ背景色の画像を同じ水平方向の行に保持し、複数の行を作成するなど、PNGファイル形式で利用できる圧縮要素があります。理由が何であれ、実際にはこれまでに見たもの以上のものはありません。別の画像例を次に示します。

アイコン

.icons 
{ 
display: block; 
width: 40px; 
height: 40px; 
background-image: url(images/sixicons.png); 
background-repeat: no-repeat; 
}

このクラスから、各アイコンの幅と高さは40ピクセルであり、画像ファイル名はsixicons.pngであると推測できます。今回は、すべてのサブ画像が同じサイズであるという意味で、X/Yトリミングの非常に難しい例を作成しませんでした。ただし、おわかりのように、そうでない場合でも、同様の（正確ではありませんが）手法を使用していることになります。

まず、左上のアイコンをトリミングしてみましょう。

.icon_1 { background-position: 0px 0px; }

マークアップは次のようになります。

<span class="icons icon_1"></span>

もちろん、それが最も簡単な方法でした。ここで、中央下のアイコンが必要だとします。

.icon_5 { background-position: -40px -40px; }

すべてのアイコンのCSSを見てみましょう。

.icon_1 { background-position: 0px 0px; } 
.icon_2 { background-position: -40px 0px; } 
.icon_3 { background-position: -80px 0px; } 
.icon_4 { background-position: 0px -40px; } 
.icon_5 { background-position: -40px -40px; } 
.icon_6 { background-position: -80px -40px; }
于 2012-05-16T10:15:29.957 に答える
0

CSSスプライトを使用する必要があります。ここにいくつかの非常に簡単なチュートリアルがあります。

于 2012-05-16T10:15:18.827 に答える
0

これはあなたが必要とすることをするはずです：

http://jsfiddle.net/8Eucw/1/

CSS：

#aBit {
 background-image: url('http://www.google.co.uk/images/nav_logo107.png');
 background-position-x: 114px;
 background-position-y: 63px;
 width: 18px;
 height: 18px;   
}​

HTML：

<img src="http://www.google.co.uk/images/nav_logo107.png" /><br />
<hr />
<img id="aBit" />​
于 2012-05-16T10:21:17.417 に答える