web-dev-qa-db-fra.com

Image d'arrière-plan CSS dans: après l'élément

J'essaie de créer un bouton CSS et d'y ajouter une icône en utilisant: après, mais l'image ne s'affiche jamais. Si je remplace la propriété 'background' par 'background-color: red', une boîte rouge apparaîtra donc je ne sais pas ce qui ne va pas ici.

HTML:

<a class="button green"> Click me </a>

CSS:

.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}

.button:after {
content: "";
width: 30px;
height: 30px;
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}

.green {
background-color: #8ce267;
}

Vous pouvez vérifier ce violon pour voir ce que je veux dire exactement.

Merci pour tous les conseils.

cssbackground
22
Brian Spilner

Quelques choses

(a) vous ne pouvez pas avoir à la fois la couleur de fond et le fond, le fond gagnera toujours. dans l'exemple ci-dessous, je les ai combinées par raccourci, mais cela ne produira la couleur qu'en tant que méthode de secours lorsque l'image ne s'affiche pas.

(b) no-scroll ne fonctionne pas, je ne pense pas que ce soit une propriété valide d'une image d'arrière-plan. essayez quelque chose comme fixe:

.button:after {
    content: "";
    width: 30px;
    height: 30px;
    background:red url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -50px fixed;
    top: 10px;
    right: 5px;
    position: absolute;
    display: inline-block;
}

J'ai mis à jour votre jsFiddle à cela et il a montré l'image.

45
PlantTheIdea

Comme l'a dit AlienWebGuy, vous pouvez utiliser l'image d'arrière-plan. Je vous suggère d'utiliser l'arrière-plan, mais il faudra trois propriétés supplémentaires après l'URL:

background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;

Explication: les deux zéros sont le positionnement x et y pour l'image; si vous souhaitez ajuster l'endroit où l'image d'arrière-plan s'affiche, jouez avec ceux-ci (vous pouvez utiliser des valeurs positives et négatives, par exemple: 1px ou -1px).

Pas de répétition indique que vous ne voulez pas que l'image se répète sur tout l'arrière-plan. Cela peut également être répéter-x et répéter-y.

6
Sean