web-dev-qa-db-ja.com

CSS、背景リピート距離

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

たとえば、私はこの画像をbackground-imageにする必要があります。

enter image description here

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

enter image description here

JSFiddle playground を確認します

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

cssbackground-imagebackground-repeat
17
fguillen

船はかなり航海したと思いますが、それでもデータURIに基づく解決策があります。

画像より大きいサイズの画像を含むSVGを生成できます（たとえば、マージンを60pxにするには、幅を画像の幅（40px）+必要なマージン（60px）= 100pxに等しくするだけです）：

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

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

そして最後に、このSVGをデータURIを含む背景画像として追加します。

#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. 画像をdata-URIで埋め込む必要があります。これはおそらくあなたが頻繁にやりたいことではありません。
  2. ソリューションは少し重いようです。
  3. IE9の場合、SVGをURLとしてエンコードする必要があります。

これらすべての問題に対する可能な解決策は、CSSプリプロセッサを使用することです。サス。あなたはミックスインを作ることができます、例えば：

@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=');
}

ここに多くのものを追加できます。他のすべてのマージン値については、コンパスを使用して手動で書き込む代わりに、画像をエンコードして挿入できます。 この記事 このプロセスの詳細については、これはすでに、より使いやすく快適に見えます。

9
smnbbrv

バックグラウンドリピート（CSS3）でspace属性を使用する必要があります

http://www.impressivewebs.com/space-round-css3-background/

すべてのブラウザでサポートされているわけではなく、サンプル画像では垂直方向のスペースのみが表示されているようです。

より良い選択は、実際の画像の周りに必要なスペースを持つように背景画像自体を変更することです（空白の領域で画像を埋めます）。

4
Patrick Evans