CSS：css擬似クラスで画像スプライトを使用する：beforeと：after

Question

これまでにこれまで試みたことはありません。私は2つのアイコンを含む画像スプライトを作成しました。各アイコンの幅は26px、高さです。したがってスプライトは26x52pxです。

私はdiv.somethingまたはdiv.anythingのいずれかにある要素を持っています。クラスに応じて、左または右にコーナーキャップを追加します。

したがって、私は相対座標を配置しています。:before疑似クラスをimgに適用し、高さと幅を26pxにしてスプライトのアイコンが1つしかないようにしてください。また、 "オーバーフロー：スプライト上の2番目のアイコンを非表示にするために非表示にします。

.element { 
    position:relative; 
} 

.element:before{ 
    content: url("../images/sprite.png"); 
    position: absolute; 
    height:26px; 
    width:26px; 
    overflow:hidden; 
} 

.something .element:before { 
    top: -2px; 
    left: -2px; 
} 

anything .element:before { 
    top: -28px; 
    right: -2px; 
} 

これは、スプライトの最初のトップアイコンを使用する左隅に問題なく動作します。 しかし今、私はどのように "何か.element"のスプライトに2番目のアイコンしか表示できないのだろうかと思います。

実際には、「マスク」は-2px、-2pxに配置する必要がありますが、スプライトimg insideは-26pxから開始し、2番目のアイコンが表示されます。

これは私が今やっているようにCSSで可能ですか？

Answer 1

位置を変更できないため、contentに画像を挿入しないでください。代わりに、内容を" "に設定し、スプライトを背景イメージとして追加します。スプライトを正しい位置に移動するには、background-positionプロパティを使用します。そうでなければ、あなたの例はうまくいくはずです。

作業のデモ：用

http://jsfiddle.net/RvRxY/1/

Answer 2

サポート：と前に：すべてでほとんどのブラウザに存在しない場合のimgタグの擬似要素の後に、限られています。

imgをdivに配置し、imgではなく実際のdivに適用するのが最適な解決策です。

ほとんどの場合、疑似要素の使用法は正しいです。これを試すことができます：

.somediv { position:relative;} 

.somediv:before { 
    position: absolute; 
    content: ''; 
    height: 26px; 
    width: 26px; 
    top: 0; 
} 

.somediv.foo1:before { 
    background: url("../images/sprite.png") no-repeat -2px -2px; 
    left: 0; 
} 

.somediv.foo2:before { 
    background: url("../images/sprite.png") no-repeat -2px -28px; 
    right: 0; 
} 

バックグラウンドを使用します。コンテンツではなくプロパティです。プロパティを使用して：before擬似要素内にスプライトを配置することができます。

左：;右：;トップ：その親（Σed）に対する擬似要素の絶対的な位置決めに使用する必要があります。あなたの疑似要素の周囲に1ピクセルの境界線を配置する

はあなたが別の位置:)