Images répétées avec l' :après les pseudo-éléments

Je voudrais mettre les titres dans mon site comme ceci: http://cl.ly/0m3F0j392e0G1n0s0T34
Ce que j'avais l'idéal à faire est d'utiliser le texte pour le titre et ensuite avoir un 10px par 10px gif répétition horizontale après.

EDIT: je dois ajouter que je voudrais utiliser un arrière-plan texturé donc je ne peux pas définir toutes les couleurs solides à l'élément h2.

J'ai été en mesure d'ajouter dans le gif après le titre mais je n'arrive pas à le répéter, même si j'ajoute repeat-x. Voici le code que j'ai utilisé:

h2:after {
content: 'url(img/imagehere.gif) repeat-x';
}

Existe-il des solutions de contournement pour ce ou de toute autre méthode? Je préfère ne pas recourir à découpage de l'ensemble du titre sous forme d'une image. J'ai pensé flottant le titre vers la gauche puis flottante un div vide à droite avec le gif comme une répétition de l'image de fond mais je suppose que c'est ce que l' :après le pseudo-élément est de, droite?

OriginalL'auteur Scott L | 2011-10-23

Un peu hacky et impliquer l'ajout de overflow-x:hidden; à l'élément parent, mais devrait faire l'affaire:

h2 {
    position: relative;
    padding-right: 10px;
    float: left;
    }
h2::after {
    content: '';
    position: absolute;
    left: 100%;
    right: 9999px;
    background: url(image.gif);
    height: 10px;
    width: 9999px;
    }

Pour info remarque la différence de notation entre pseudo-éléments de et pseudo-classes en CSS3
Pour info, noter la différence entre la compatibilité du navigateur et CSS3 😛

OriginalL'auteur Chris Sealey

0

Vous pouvez définir des attributs pour vos après le pseudo-élément. Ce que je voudrais faire afficher le contenu "" (vide) et puis définissez la largeur et la hauteur de la pseudo-élément. Vous pouvez définir l'arrière-plan à la répétition de gif comme normal à l'époque.
```
h2:after {
  content: "";
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}
```
Merci pour la réponse. J'ai essayé et cela semble logique, mais ne vaut pas pour quelque raison que ce soit. Je l'ai mis sur JSfiddle pour vous montrer: jsfiddle.net/PMc4S
Ici ya aller jsfiddle.net/PMc4S/1

OriginalL'auteur Erik Hinton
0

Lorsque vous utilisez content:url() pressé de classe créer un img élément. Vous avez besoin d'utiliser background dans ce cas. Comme quoi Erik dit.

Mais si la taille de votre texte dans la rubrique n'est pas connu (aka contenu dynamique) puis pseudo-élément n'est pas un bon travail. Vous pouvez utiliser un balisage comme ceci:
```
<h1><span>your text content</span></h1>
```
Puis ajouter la répétition d'arrière-plan à h
```
h1{ background:'url(img/imagehere.gif) repeat-x';}
```
Pour masquer l'arrière-plan dans le cadre de ce texte apears de faire le span'arrière-plan une couleur unie
```
span{background:white} 
```
Mise à jour:

si vous avez une image de fond sous votre h1, alors vous pouvez faire ceci:

HTML: <h1><span>your text content</span></h1>

CSS:

dire votre body ont une image d'arrière-plan:
```
body{background-image:(foo)}
```
alors vous voulez bar à votre image de répéter après le titre. Vous devriez faire ceci:
```
h1{background:url(bar)}
```
Et ajouter le même arrière-plan de votre body ont à la span contenant votre texte:
```
h1 span{background-image:(foo)}
```
Cela permettrait de résoudre votre problème. Regardez cette Violon voir en action. Ce n'est pas dépendait de la taille de votre texte ou quoi que ce soit d'autre.

Remarque: si vous utilisez un span alors vous devriez le faire dispaly:inline-block

Mise à jour:

En fonction de votre demande j'ai repenser à cela. J'ai utilisé tables cette fois. Code sans explication:

HTML
```
<table>
    <tbody>
        <tr>
            <td><h1>Heading</h1></td>
            <td class="pattern"></td>
        </tr>
    </tbody>
</table>
```
CSS
```
body{background:url(foo)}
table, tbody, tr{width:100%;}
.pattern{background:url(bar); width:100%;}
```
Voir en action<

Salut, bonne solution! Problème est que ces éléments sont sur le dessus d'un arrière-plan texturé (désolé, je n'ai pas l'indiquer dans le post original) ainsi, un solide de couleur aura l'air un peu bizarre
J'ai mis à jour ma réponse. Je crois que j'ai répondu à votre question. Oui??
Salut, oui aussi une bonne correction. Le problème je pense est que la texture je voudrais l'utiliser est tout à fait detaild (je pense à un plan) de sorte que les deux images d'arrière-plan peuvent ne pas correspondre. J'ai perdu les pédales sur votre violon pour vous montrer: lien
OK, je l'ai! Voir les mises à jour! (Je déteste les tables de trop, mais c'est mieux que d'utiliser JS pour le style)
Mohsen vous avez été un énorme aider, et j'apprécie vraiment vous aider! Ressemble à la CSS truc de Chris fonctionne à merveille aussi bien

OriginalL'auteur Mohsen
0

La réponse ci-dessus à partir de Erik Hinton travail si vous ajoutez "display:block" de la déclaration, comme ci-dessous:
```
h2:after {
  content: "";
  display:block;
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}
```
OriginalL'auteur Andrew Gavin

Vous devez vous connecter pour publier un commentaire.