Plusieurs arrière-plan des images et une couleur d'arrière-plan

Supposons que je veux rendre une flèche dans le CSS, qui doit avoir une tête, une queue et flexible de la largeur de sorte qu'il peut contenir du texte. Je peux bien sûr créer plusieurs divs pour obtenir ce que je veux, mais comment cela peut-il être fait en CSS3?

Je peux utiliser plusieurs images d'arrière-plan:

div.arrow{
    background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}

Le code html:

<div class="arrow">This text is on a transparent background</div>

Cela me donne une div avec une flèche-tête et la queue, et la transparence de la moyenne-section.
Il ne semble pas possible de spécifier la couleur de la section du milieu.

Avec une seule image de fond d'écran, vous pouvez faire ceci:

div.arrow{ background: red url('some_image.png') no-repeat; }

Je sais que c'est faisable dans beaucoup de façons, mais est la propriété background-color vraiment perdue à partir de l'abréviation définition?

OriginalL'auteur Frederik Wordenskjold | 2011-03-25

  1. 24

    Non, ce n'est pas exactement perdue à partir de l'abréviation de la déclaration. Vous pouvez toujours spécifier la couleur d'arrière-plan, mais uniquement pour le dernier (au milieu) de la couche (indépendamment de savoir si vous mettez une image):

    div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat, 
                red;
}

    Noter que, pour votre scénario, vos images peuvent avoir complètement opaque origines. La couleur d'arrière-plan va montrer sous toutes les pixels transparents de vos images.

    jsFiddle démo

    Déclarant background-color séparément, cependant, peut être beaucoup mieux pour votre scénario, car il vous permet d'utiliser différentes couleurs sur la base des mêmes images d'arrière-plan (si vous êtes bon avec les pixels transparents sur les parties de vos images pour être rempli avec la couleur de fond de CSS):

    div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat;
}

/* Assuming your red arrow has this ID */
#red {
    background-color: red;
}

    jsFiddle démo

    C'est assez cool. Il travaille dans IE9 mais pas IE9 dans la compatibilité de mode.
    Wellens: Parce que IE9 en mode de compatibilité n'utilise pas la IE9 moteur de rendu. Je ne me souviens pas si c'est 7 ou 8.
    Ahh merci. Le problème est la non-arrière-plan opaque-images. Bien sûr, la couleur d'arrière-plan va remplir les zones transparentes, ce qui semble juste remplace la bgs!

    OriginalL'auteur

  2. 2

    - Je trouver de l'aide de plusieurs images d'arrière-plan d'être un problème pour ce genre de choses. Avez-vous considéré l'utilisation de l' :before et :after éléments pseudo? J'ai écrit un exemple rapide:

    <style>
    .arrow { display:block; margin:0; padding:0; width:200px; height:45px; line-height:45px; text-align:center; background:#ddd; }
    .arrow:before { float:left; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
    .arrow:after { float:right; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
</style>

<div class="arrow">This text is on a transparent background</div>

    Il suffit de remplacer la couleur d'arrière-plan dans le :before et :after déclarations à la flèche d'images que vous voulez.

    En fait, je ne pense pas que de cette. Belle solution!
    Et c'est un peu mieux dans la compatibilité de champ 🙂
    ouais, je sais 🙂 je suis juste de déconner avec le css3 un peu, pour tester des trucs. Mais oui, encore du chemin à la non prise en charge de compter sur lui dans un projet réel.

    OriginalL'auteur