CSS Hintergrundbild in: nach Element
Ich versuche, erstellen Sie ein CSS-button und fügen Sie ein Symbol, um es mit :nach, aber das Bild wird nie angezeigt. Wenn ich ersetzen die 'background' - Eigenschaft mit 'background-color:red' dann ein rotes Feld erscheint, so bin ich nicht sicher was ist falsch hier.
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;
}
Sie können dies überprüfen, fiddle, um zu sehen, was ich meine genau.
Vielen Dank für alle Tipps.
InformationsquelleAutor der Frage Brian Spilner | 2013-02-04
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ein paar Dinge
(a) Sie kann sowohl hintergrund-Farbe und hintergrund, der hintergrund wird immer gewinnen. im Beispiel unten, Verband ich Sie durch die Kurzform, aber dadurch wird die Farbe nur als fallback Methode, wenn das Bild nicht zeigen.
(b) nicht-scrollen funktioniert nicht, ich glaube nicht, dass es eine gültige Eigenschaft für ein hintergrund-Bild. versuchen Sie so etwas wie Feste:
Ich aktualisiert Ihre jsFiddle diese, und es zeigte das Bild.
InformationsquelleAutor der Antwort PlantTheIdea
Als AlienWebGuy sagte, Sie können den hintergrund-Bild. Ich würde vorschlagen, Sie hintergrund verwenden, aber es müssen noch drei weitere Eigenschaften, die nach der URL:
background: url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") 0 0 no-repeat;
Erklärung: die beiden Nullstellen sind x-und y-Positionierung für das Bild; wenn Sie wollen, um einzustellen, wo das Bild im hintergrund zeigt, spielen, um mit dieser (die Sie verwenden können, sowohl positive als auch negative Werte von e ist.g: 1px oder -1px).
No-repeat, sagt Sie nicht wollen, das Bild zu wiederholen, die über den gesamten hintergrund. Dies kann auch repeat-x und repeat-y.
InformationsquelleAutor der Antwort Sean