web-dev-qa-db-de.com

Hintergrundbild erscheint nicht in der Spanne

Ich habe Probleme mit einem Span-Tag, der ein Hintergrundbild im neuesten FF unter Windows 7 .. zeigt .. Es scheint zu funktionieren und zeigt alles in früheren FF, Chrome, Safari und IE, aber Handheld-Geräten und Windows 7 scheint zu scheitern.

Es tut uns leid, wenn dies vage erscheint. Ich kann es einfach nicht herausfinden, die Bilder waren ursprünglich PNGs ohne Höhe und ive, da sie Gifs gemacht und eine Höhe angewendet haben.

<span class="design">Design Viz</span>
<style>
.design  {
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    padding-left:25px;
}
</style>
30
Liam

Die CSS-Eigenschaft background-image setzt nur ein Bild als Hintergrund. Die Breite und Höhe eines Objekts wird immer entweder durch statische Einstellungen über CSS/Inline-Styling oder durch die tatsächliche Größe des darin angezeigten Inhalts definiert. In Ihrem Fall, da Sie keinen Inhalt zwischen Ihren Tags hinzugefügt haben , seine x/y-Dimensionen werden 0 sein, aber es gibt keinen Fehler im Hintergrund. Es ist nur vorhanden, Sie können es nur sehen, wenn Sie (irgendwie) eine Größe für das Element definieren.

<span class="design">Design Viz</span>
.design  {
padding-left:25px;
background:url(_includes/images/agenda-design.gif) no-repeat top left;
display: inline-block;
height: 17px;
width: 50px;
}

Wo 50 kann jeder nützliche Wert für Ihren Fall sein.

51
Victor Nițu

anzeige: Inline-Block; wird von IE7 nicht unterstützt. Sie können das Problem beheben, indem Sie Folgendes hinzufügen:

.design  {
    padding-left:25px;
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    width: 50px;
    zoom: 1;
    *display:inline;
}
1
GDW

Sie können die Attribute no-repeat top left nicht festlegen, wenn Sie ein Hintergrundbild angeben. In background-image müssen Sie nur den Link zu Ihrem Bild setzen.

Oder Sie könnten background so verwenden:

background: url(...) no-repeat top left
0
Edmund Lee

polsterung verwenden wie 

 padding-left:25px;
    padding-top: 6px;
    padding-bottom: 10px;
    padding-right: 5px;
0
Pankaj Upadhyay