13

コンパススピリットを初めて使用します。アイコン画像（サイズは少し異なります）を中央に配置したかったのです。添付画像のように

ここに画像の説明を入力してください

この設定を使用しています

$icons-spacing:40px;
@import "icons/*.png";
@include all-icons-sprites;

私が取得しているCSSは（たとえば）

.icons-adventure {
  background-position: 0 -608px;
}

私が要求したようにそれはそうではありません。上と左からもっと間隔を空けたいです。

4

6 に答える 6

3

この Github Gist: https://gist.github.com/adamlogic/3577147を確認してください。これは、過去のスプライトの問題を修正し、Compass でのスプライトのしくみをよりよく理解するのに役立ちました。

あなたにとって特に興味深いのは、著者が次のことを言及している部分かもしれません：（Gistが削除された場合に備えてここに貼り付けられます）

「独自の (スプライト) mixin を定義することで、これをさらに進めました。」

$spritemap-spacing: 50px
@import "spritemap/*.png"

=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0)
  background-image: $spritemap-sprites
  background-repeat: $repeat
  +sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y)

  // if no offsets given, set the dimensions of the element to match the image
  @if $offset-x == 0 and $offset-y == 0
    +sprite-dimensions($spritemap-sprites, $name)

「そして、私はそれをどのように使用していますか」

// simplest case; sets the background image and dimensions of the element
h3
  +background-sprite(ribbonfull)

// custom offset; does not set the dimensions of the element
h2
  +background-sprite(ribbonend, no-repeat, 3px, 22px)

// repeating backgrounds are possible, too
#positions
  +background-sprite(doubleline, repeat-x, 0, 45px)

そして、著者が生成した CSS:

h3 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 0 -405px;
  height: 29px;
  width: 295px; }

h2 {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: no-repeat;
  background-position: 3px -296px; }

#positions {
  background-image: url('/images/spritemap-sb826ca2aba.png');
  background-repeat: repeat-x;
  background-position: 0 -751px; }
于 2013-02-14T19:13:19.277 に答える
3

この問題に対して 2 つの回避策を見つけましたが、どちらも完全ではありません。

  1. 必要なパディングを使用して画像エディターにアイコンを保存するだけです。1 か所でのみ使用する場合は機能しますが、そうでない場合は複製を作成する必要があります (これが常に機能するとは限りません)。
  2. 他の解決策は、疑似要素を使用することです。背景を追加したい要素が であり、アイコンをアイコンフォルダーに配置したと仮定します。
@import "icons/*.png";

el { 
  position: relative; 
}

el:after { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  @include icons-sprite(some_icon); 
  margin-top: - round(icons-sprite-height(some_icon) / 2); 
  margin-left: - round(icons-sprite-width(some_icon) / 2);    
}
于 2013-02-18T22:39:50.233 に答える
1

$icons-spacing生成されたスプライト マップ内の各画像を区切るピクセル数を定義します。生成されたスタイル$icons-positionを調整 (オフセット) する必要があると思いますbackground-position

于 2012-06-22T21:24:07.653 に答える
0

最初に、良い質問...

CSS でスプライトを与えると、 でクラスを生成できるようになります.image-name。これが Compass スプライトの仕組みです。画像は大きなスプライト画像に追加され、すべての不規則な画像がグリッド状にまとめられます。

$icons-spacingグリッドにいくらかのパディングを与えることができますが、この場合、それを配置するのはそれほど簡単ではありません。したがって、生成されたものを先に進めて、次のことを行います。

したがって、図のようなものが必要な場合は、Compass によって生成されたクラスを持つ要素を中央に配置する必要があります。

今、あなたがadventure.pngそれを持っていて、このクラスを生成したとしましょう:

.icons-adventure {
    background-position: 0 -608px;
}

さて、これを中心にしたい場合は、このようにできます。

<div class="border">
    <i class="icons-adventure"></i>
</div>

クラスについてはborder、パディングを指定します。つまり、ここで言いたいのは、 を にラップし.borderたということ.icons-adventureです。ここで、パディングと幅を与える必要があります。

.border {padding: 15px; width: 40px;}

ここでは、高さは自動的に処理されるため、高さは必要ありません。明確な説明を得るために、フィドルを用意しましょう。

于 2013-02-14T18:00:01.997 に答える
0

アイコンのサイズがわかっている場合は、すべてのアイコンにデフォルトの高さを設定し、単一のアイコンに (デフォルトの高さ - アイコンの高さ)/2 の垂直オフセットを与え、中央で水平に配置できます。

$sprite-spacing: 50px;
@import "compass/utilities/sprites";
@import "sprite/*.png";
@include all-sprite-sprites;
$sprite: sprite-map("sprite/*.png", $spacing: 50px);

@include sprite-sprite(myicon);
@include sprite-background-position($sprite, myicon, center, 12px);
于 2014-03-28T16:26:58.953 に答える