web-dev-qa-db-ja.com

CSS：css疑似クラス：beforeおよび：afterで画像スプライトを使用する

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

Div.somethingまたはdiv.anythingのいずれかにある要素があります。どのクラスに属しているかに応じて、左または右にコーナーキャップを追加したいと思います。

したがって、.elementを相対的に配置し、: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;
}

これは、スプライトの最初の上部アイコンを使用する左隅では問題なく機能します。ただし、「anything .element」のスプライトの2番目のアイコンのみを表示するにはどうすればよいのでしょうか？.

したがって、実際には「マスク」は-2px、-2pxに配置する必要がありますが、内部のSprite imgは-26pxで開始する必要があるため、2番目のアイコンが表示されます。

これは私が今やっている方法でCSSで可能ですか？

cssspritecss-spritespseudo-class
17
matt

画像の位置は変更できないため、contentを使用して画像を挿入しないでください。代わりに、コンテンツを" "に設定し、スプライトを背景画像として追加します。次に、background-positionプロパティを使用して、スプライトを正しい位置に移動できます。それ以外の場合、例は問題なく機能するはずです。

実用的なデモ：

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

26
Tatu Ulmanen

ほとんどのブラウザに存在する場合でも、imgタグの：beforeおよび：after疑似要素のサポートは制限されています。

最善の解決策は、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疑似要素内に配置できます。

左：;正しい：;とトップ：;親（.somediv）を基準にした疑似要素の絶対配置に使用する必要があります。

疑似要素の周囲に1pxの境界線を配置すると、さまざまな配置を理解するのに役立ちます:)

3
Larry