クリップを使用してCSS背景スプライト画像の特定の領域を非表示にすることはできますか？

Question

CSSbackground imageの特定の領域を非表示にすることはできますか？clip？たとえば、画像に複数のアイコンがありますが、アイコンを1つだけ表示したいとします。 Divのエリアはアイコンのサイズよりも大きいので、他の不要なアイコンも表示されます。その単一のアイコンの別のイメージを作成せずにそれらを隠すことはできますか？

Jsfiddle http://jsfiddle.net/jitendravyas/FyMW6/1/

Answer 1

基本的には、イメージの領域を指定するために使用する各イメージ用のコンテナを作成します。

http://jsfiddle.net/FyMW6/4/

HTML：

<div class="button"> 
    <div class="text">Lorem ipsum dolor sit amet</div> 
    <div id="house" class="icons"></div> 
</div> 

CSS：

.button {  
    width: 300px; 
    float: left; 
    border:1px solid red 
} 

.text { 
    float: left; 
    width: 245px; 
} 

.icons { 
    background-image: url("http://www.smtusa.com/uploads/cssexample.jpg"); 
    background-repeat: no-repeat; 

    width: 50px; 
    height: 50px; 
    float: right; 
} 

#house { 
    background-position: -56px -45px; 
} 

#gear { 
    background-position: -56px -106px; 
} 

Answer 2

いいえ、私は少なくともないCSS2では、そうは思いません。

背景画像にclipプロパティを適用することはできません。

CSS3には、あなたが必要とするものを正確に行うように見えるという性質があります（ background-clip）。しかし、現時点では限られたブラウザのサポートが付属しています。 CSSにはbackground-clipというプロパティがありますが、画像のレンダリングに使用する境界ボックスのみを指定することができます。

アイコンに別のコンテナを使用する以外は解決策がない場合があります。

Answer 3

最も簡単な方法は、ディスプレイにクラスを設定することです：なし。