17

私は前にそれを試したことはありません。2 つのアイコンを含むイメージ スプライトを作成しました。各アイコンの幅と高さは 26 ピクセルです。したがって、スプライトは 26x52px です。

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

したがって、.element を相対的に配置し、疑似クラス:beforeを img に適用し、高さと幅 26px で絶対的に配置して、スプライトのアイコンが 1 つだけ収まるようにします。また、「overflow:hidden」を適用してスプライトの 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 は -26px で開始する必要があるため、2 番目のアイコンが表示されます。

これは、私が現在行っている方法で css で可能ですか?

4

2 に答える 2

27

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

実際のデモ:

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

于 2011-08-15T12:57:10.063 に答える
3

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 の境界線を配置すると、さまざまな配置を理解するのに役立ちます:)

于 2011-08-15T13:34:26.657 に答える