CSS image d'arrière-plan :à partir de l'élément
Je suis en train de créer un bouton CSS et ajouter une icône à l'aide d' :après, mais l'image n'apparaît jamais. Si je remplace le "fond" de la propriété avec "background-color:red" rouge s'affiche donc je ne sais pas quel est le problème 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 le vérifier violon pour voir ce que je veux dire exactement.
Merci pour les conseils.
Vous devez vous connecter pour publier un commentaire.
Un couple de choses
(a) vous ne pouvez pas avoir les deux couleur d'arrière-plan et d'arrière-plan, arrière-plan toujours gagner. dans l'exemple ci-dessous, je les ai combiné par abréviation, mais cela permettra de produire de la couleur seulement comme un secours méthode lorsque l'image ne s'affiche pas.
(b) n-scroll ne fonctionne pas, je ne crois pas que c'est une propriété valide d'une image de fond d'écran. essayez quelque chose comme fixe:
J'ai mis à jour votre jsFiddle à cela et elle a montré à l'image.
:after
élément: Vous devez définir la valeur decontent
avant, vous pouvez définir l'arrière-plan(image), sinon, il n'affiche rien. Si vous arrivez à remplircontent
avec quelque chose d'autre que l'espace et l'a placé après l'arrière-plan(image), puis la valeur insérée et le background-image sera affichée.Comme AlienWebGuy dit, vous pouvez utiliser background-image. Je vous suggérons d'utiliser le fond, mais il aura besoin de plus de trois propriétés 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 x et y de positionnement de l'image; si vous souhaitez régler l'image de fond s'affiche, jouer avec eux (vous pouvez utiliser des valeurs négatives et positives, e.g: 1px ou -1px).
No-repeat dit que vous ne voulez pas l'image de répéter à travers l'ensemble de l'arrière-plan. Cela peut aussi être repeat-x et repeat-y.