web-dev-qa-db-fra.com

CSS, distance de répétition d'arrière-plan

Je veux définir un background-image mais avec une distance spécifique entre les répétitions.

Par exemple, j'ai cette image pour devenir un background-image:

enter image description here

Et je veux corriger les répétitions dans un modèle comme celui-ci:

enter image description here

Vérifiez le aire de jeux JSFiddle

Je recherche une solution propre CSS3, pas JS, pas d'éléments supplémentaires, etc. Si je dois utiliser des astuces CSS3 (non prises en charge) très modernes, c'est ok.

cssbackground-imagebackground-repeat
17
fguillen

Je suppose que le navire a à peu près navigué, mais il existe toujours une solution basée sur l'URI de données.

Vous pouvez générer un SVG contenant votre image qui a une taille supérieure à l'image (par exemple pour faire la marge 60px juste faire une largeur égale à la largeur de l'image (40px) + la marge souhaitée (60px) = 100px):

L'étape suivante consiste à intégrer votre image à l'intérieur du SVG:

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

Et enfin, ajoutez ce SVG comme image de fond avec l'URI de données:

#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;
}

Voir la mise à jour Fiddle .

On peut dire que c'est une solution de contournement assez grande et sale. Cependant, il s'agit d'une solution CSS pure qui ne nécessite pas la création d'éléments HTML/JavaScript supplémentaires. Elle présente certains inconvénients:

  1. Vous devez incorporer l'image avec l'URI de données. Ce n'est probablement pas la chose que vous aimeriez faire souvent.
  2. La solution semble un peu lourde.
  3. Pour IE9, vous devez coder le SVG en tant qu'URL.

La solution possible à tous ces problèmes consiste à utiliser des préprocesseurs CSS, par exemple Toupet. Vous pouvez faire un mixin, par exemple:

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

Vous pouvez ajouter ici beaucoup de choses, par exemple toutes les autres valeurs de marge, vous pouvez encoder l'image pour l'injecter au lieu de l'écrire manuellement à l'aide de Compass, voir par ex. cet article pour en savoir plus sur ce processus. Cela semble déjà bien meilleur et plus confortable à utiliser.

9
smnbbrv

Vous devez utiliser l'attribut space dans le background-repeat (CSS3)

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

Tous les navigateurs ne le prennent pas en charge, et il semble que ce soit uniquement pour l'espace vertical par les exemples d'images.

Le mieux serait de modifier l'image d'arrière-plan elle-même pour avoir l'espace nécessaire autour de l'image réelle (remplissage de l'image avec une zone vierge)

4
Patrick Evans