it-swarm.com.de

CSS-Hintergrundbild funktioniert nicht

Ich weiß nicht, was los ist, aber das Hintergrundbild scheint nicht zu laden.

test.html:

<div class="pToolContainer">
     <span class="btn-pTool">
         <a class="btn-pToolName" href="#"></a>
     </span>
     <div class="pToolSlidePanel"></div>
</div>

style.css:

    .btn-pTool{
    margin:0;
    padding:0;
    background-image: url(slide_button.png);
    background-repeat:no-repeat;
    }

    .btn-pToolName{
        text-align: center; 
        width: 26px; 
        height: 190px; 
        display: block; 
        color: #fff; 
        text-decoration: none;  
        font-family: Arial, Helvetica, sans-serif;  
        font-weight: bold; 
        font-size: 1em; 
        line-height: 32px; 
    }

Übrigens existiert das Bild im Ordner von test.html.

14
Twidizle

Fügen Sie "Anzeige: Block" hinzu. in Ihrer .btn-pTool-Klasse

5
Manny

Ich stand vor diesem Problem. Meine HTML war wie folgt:

<th style="background-image:url('Image.png');">
</th>

Ich habe "& nbsp" hinzugefügt, als @shankhan in th vorschlug, und das Bild wurde angezeigt.

<th style="background-image:url('Image.png');">
   &nbsp;
</th>
4
user007

Verwenden Sie die Abkürzungseigenschaft für die Hintergrundeigenschaft, und geben Sie den Ordnernamen ein, in dem sich das Bild befindet.

.btn-pTool{
    margin:0;
    padding:0;
    background:url("../folder name/slide_button.png") no-repeat; 
            }

.btn-pToolName{
    text-align: center; 
    width: 26px; 
    height: 190px; 
    display: block; 
    color: #fff; 
    text-decoration: none;  
    font-family: Arial, Helvetica, sans-serif;  
    font-weight: bold; 
    font-size: 1em; 
    line-height: 32px; 
}

Zusätzlich zu display:block OR display:inline-block

Geben Sie Ihrem .btn-pToolName ausreichend padding und stellen Sie sicher, dass Sie die korrekten Werte für background-position haben.

1
Robin Maben

Verwenden Sie dieses, um Hintergrund hinzuzufügen ---

background-image: url('images-path');

Sie können auch eine Wiederholungs- oder Nichtwiederholungsfunktion hinzufügen!

background: url('images-path')   no-repeat 00;
0
user621162

Kopieren Sie einfach dieses Hintergrundbild und fügen Sie es hinterher: url(../slide_button.png); statt background-image: url(slide_button.png);.__In einem solchen Fall müssen Sie ../ vor dem Pfad ..__ verwenden. Entweder müssen Sie den vollständigen Pfad angeben Die Sache ist, wenn Sie vor einer Änderung einfach den Browserverlauf löschen und dann die Seite aktualisieren.

0
user3750236
<span class="btn-pTool">
         <a class="btn-pToolName" href="#"></a>
     </span>

Versuchen Sie, display:block zu .btn-pTool hinzuzufügen, und geben Sie Breite und Höhe an.

Auch in Ihrem Code haben sowohl tbn-pTool als auch btn-pToolName keinen Textinhalt, so dass sie möglicherweise überhaupt nicht angezeigt werden.

Sie können versuchen, kommende Inhalte auf diese Weise zu erzwingen

.btn-pTool, .btn-pToolName {
    content: " ";
}
0
Jose Faeti

@TheBigO, das stimmt nicht. Spannweiten können Hintergrund/Bilder haben (getestet in IE8 und Chrome als Sicherheitsüberprüfung).

Das Problem ist, dass der a.btn-pToolName als display: block markiert ist. Dies führt dazu, dass Webkit-Browser den Hintergrund nicht mehr im äußeren Bereich anzeigen. IE scheint es so darzustellen, wie es dem OP fehlt.

OP-Chance, dass die .btn-pTool-Klasse angezeigt wird: Inline-Block, damit sie wie ein span/div-Hybrid funktioniert (nehmen Sie den Hintergrund, verursachen Sie jedoch keinen Bruch im Layout). 

0
Sean

Der folgende Code funktioniert. Ersetzen Sie den Text in einfache Anführungszeichen durch Ihren Bildnamen. Wenn es sich in demselben Ordner befindet, fügen Sie ../foldername/'ihreimagename ' hinzu. Ich hoffe, das hilft. 

HINWEIS:

Die Verwendung der einfachen Anführungszeichen durch die meisten Programmierer wird nicht empfohlen, aber ich verwende es und es funktioniert. Wenn Sie ein PHP schreiben würden, würden Sie sich darüber im Klaren sein, was es kann, d. H. Das Hintergrundbild automatisch aus der Variablen hinzufügen usw..

<html>
<head>
<style type="text/css">
.btn-pTool{
margin:0;
padding:0;
background-image: url('your name of the field');
height:100px;
width:200px;
display:block;
}

.btn-pToolName{
    text-align: center; 
    width: 26px; 
    height: 190px; 
    display: block; 
    color: #fff; 
    text-decoration: none;  
    font-family: Arial, Helvetica, sans-serif;  
    font-weight: bold; 
    font-size: 1em; 
    line-height: 32px; 
    }
    </style>
    </head>
    <body>
    <div class="pToolContainer">
    <span class="btn-pTool"><a class="btn-pToolName" href="#">Test text</a></span>
    <div class="pToolSlidePanel">Test text</div>
    </div>
    </body>
    </html>
0
techspeque
 <span class="btn-pTool">
 <a class="btn-pToolName" href="#"></a>
 </span>

Das ist leer Fügen Sie ein nicht unterbrochenes Leerzeichen hinzu, um den Link anzugeben und einige Inhalte zu überspannen:

 <span class="btn-pTool">
 <a class="btn-pToolName" href="#">&nbsp;</a>
 </span>

Es ist auch erwähnenswert, dass die CSS-Spezifikation besagt, dass Sie einem Span kein Hintergrundbild geben können, da Spannweiten keine Blockelemente sind. Fügen Sie den Hintergrundbildcode in den Klassenstil des div ein oder verwenden Sie <p> instead of <span>. In einigen Browsern können Sie möglicherweise einen Hintergrund in einem Bereich einfügen, aber nicht alle werden (möglicherweise ältere Versionen von IE).

0
Olhovsky

Sie haben die Klasse "btn-pTool" auf span angewendet, was ein Inline-Element ist ... geben Sie display:block hinzu und fügen Sie innerhalb des <a>-Tags Text hinzu, um das Ergebnis anzuzeigen.

Geben Sie dem Bild auch eine Hintergrundfarbe und eine Hintergrundposition an, obwohl die Standardhintergrundposition vorhanden ist. Versuchen Sie es auf diese Weise

0
Mahima

1.Verwenden Sie diesen Code in Stylesheet

body {
  background: URL("slide_button.png");
  background-size: 100% 100%;
  background-repeat: no repeat;

2.Put img- und html-Datei zusammen in einem einzigen Ordner 3.IF hat nicht funktioniert. Versuchen Sie, eine png-Datei in jpg zu konvertieren private Einstellung, so dass Ihre Freunde dieses Bild nicht sehen können 4.wird immer noch nicht funktionieren.

0
user3427015

Ich habe Ihren Code ausprobiert und festgestellt, dass background-image: url(image.png); in btn-pToolName und color:#000000 geändert wird. Das Bild wird im Hintergrund angezeigt.

meine test css:

           .btn-pTool {
                margin: 0;
                padding: 0;
            }

            .btn-pToolName {
                text-align: center;
                width: 26px;
                height: 190px;
                display: block;
                color: #000000;
                text-decoration: none;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
                font-size: 1em;
                line-height: 32px;
                background-image: url(defalut.png);
                background-repeat: no-repeat;
            }

und test html:

        <div class="pToolContainer">
            <span class="btn-pTool"><a class="btn-pToolName" href="#">adad</a></span>
            <div class="pToolSlidePanel"></div>
        </div>

Hoffe das hilft.

0
Harry Joy