0

Compass/Sass でスプライトを使用すると、背景画像と背景位置が生成されます。

例えば：

background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
background-position: 0 -120px;

この背景画像は、要素の左上隅に配置されます。通常の CSS では、次のようにこれを右下隅に変更できます。

background-position: right bottom;

ただし、スプライトの各画像ではなくスプライト全体であるため、スプライトを使用する場合、これは機能しません。

スプライトの各画像を左上隅ではなく右下隅に配置するように Compass/Sass に指示するにはどうすればよいですか?

注: このスプライトを使用している要素は高さが変わるため、固定のピクセル値を使用できません。

ありがとう。

編集:私が何を意味するかを説明するために、この画像を含めています: ここに画像の説明を入力

4

1 に答える 1

1

要素の:after疑似クラスを使用してこれを実現できました。:afterクラスに画像と同じ幅と高さを与え、CSS を使用して配置する必要があります。

.element {
  position: relative;
  /* your element css */

  &:after {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    width: 60px;
    height: 60px;
    right: 0;
    bottom: 0;
    background: url('../images/generated/bg-sa8e38178a4.png') no-repeat;
    background-position: 0 -120px;    
}
于 2013-08-15T13:35:44.480 に答える