私は前にそれを試したことはありません。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 で可能ですか?