css - CSS、背景繰り返し距離

Question

設定したいのですbackground-imageが、繰り返しの間に特定の距離があります。

たとえば、私はこの画像を次のようにしていbackground-imageます:

そして、次のようなパターンで繰り返しを修正したいと思います。

JSFiddle プレイグラウンドを確認する

JS や余分な要素などではなく、CSS3 のクリーンなソリューションを探しています。非常に最新の CSS3 (サポートされていない) トリックを使用する必要がある場合は問題ありません。

Answer 1

船はほとんど航海していると思いますが、まだ data-URI に基づく解決策があります。

画像よりも大きなサイズの画像を含む SVG を生成できます (たとえば、余白を 60 ピクセルにするには、画像の幅 (40 ピクセル) + 必要な余白 (60 ピクセル) = 100 ピクセルに等しい幅にします)。

次のステップは、SVG 内に画像を埋め込むことです。

<image width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=" />

最後に、データ URI を使用してこの SVG を background-image として追加します。

#container {
    width: 300px;
    height: 100px;
    border: 1px solid #ccc;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="40"><image width="40" height="40" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=" /></svg>');
    background-position: left center;
    background-repeat: repeat-x;
}

更新されたFiddleを参照してください。

これは非常に大きく汚い回避策であると言えます。ただし、これは純粋な CSS ソリューションであり、追加の HTML 要素や JavaScript を作成する必要はありません。いくつかの欠点があります。

1. データ URI を使用して画像を埋め込む必要があります。これはおそらく、頻繁にやりたいことではありません。
2. ソリューションは少し重く見えます。
3. IE9 の場合、SVG を URL としてエンコードする必要があります。

これらすべての問題に対する可能な解決策は、Sass などの CSS プリプロセッサを使用することです。たとえば、次のように mixin を作成できます。

@mixin background-image-spaced($width, $height, $margin-right, $image) {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="#{$width + $margin-right}" height="#{$height}"><image width="#{$width}" height="#{$height}" xlink:href="data:image/png;base64,#{$image}" /></svg>');
}

body {
  @include background-image-spaced(40px, 40px, 60px, 'iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII=');
}

ここに多くのものを追加できます。たとえば、他のすべてのマージン値、Compass を使用して手動で記述する代わりに、イメージをエンコードして挿入できます。このプロセスの詳細については、この記事などを参照してください。これはすでに見た目が良く、より快適に使用できます。