Hintergrundbild unter Verwendung der Hintergrundbildeigenschaft, die nicht erscheint, um die gewünschte Anzeige nicht zu erhalten

Ich bin neu zu html/css und ich verstehe nicht, warum mein Hintergrundbild nicht über den Knopf im Suchfeld auf dem erscheint Recht. Ich möchte ein Vergrößerungsglas über den rechten Knopf im Suchfeld anzeigen lassen?Hintergrundbild unter Verwendung der Hintergrundbildeigenschaft, die nicht erscheint, um die gewünschte Anzeige nicht zu erhalten

.sbox { 
 
    width: 297.297px; 
 
    height: 25px; 
 
    background-color: rgba (0, 0, 0, 0); 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    font-size: 14px; 
 
    font-stretch: normal; 
 
    font-style: normal; 
 
    font-variant-caps: normal; 
 
    font-variant-ligatures: normal; 
 
    font-variant-numeric: normal; 
 
    font-weight: normal; 
 
    cursor: auto; 
 
    position: relative; 
 
    
 
} 
 

 
.fb { 
 
    background: url("../img/mag.png") no-repeat 0 0; 
 
    background-size: 50px 50px; 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    <link rel="stylesheet" href="css/facebook.css"> 
 
    </head> 
 

 
    <body> 
 
    <button value="1" class="tools" aria-label="Search" type="submit"> 
 
    <i class=fb></i> 
 
</button> 
 
    <input type="text" class="sbox" placeholder="Search " arial-label="Search" /> 
 
    </body> 
 

 
</html>

Quelle

2017-07-05 Sayury

Haben Sie den Button eine beliebige Breite oder Höhe gegeben ... Sie können ein Bild bg nicht sehen, wenn Sie es tun? –

Ich bin neu zu html/CSS, aber mein Vorschlag wäre nicht, die "

so schauen Sie sich den CodePen an, den ich im obigen Kommentar gemacht habe und anstelle des Hintergrundes background-image: url ("paper.gif"); – Ghoyos

Hend von der Frage, glaube ich, dass Sie ein Bild im Suchfeld auf der rechten Seite angezeigt werden sollen. Wenn ja, wenden Sie bitte ein Hintergrundbild auf die Klasse 'sbox' an und die Bildposition sollte 'right 0' sein. Die Klasse ‚sbox‘ aussehen wird, wie unten:

.sbox { 
    width: 297.297px; 
    height: 25px; 
    background-color: rgba (0, 0, 0, 0); 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    font-stretch: normal; 
    font-style: normal; 
    font-variant-caps: normal; 
    font-variant-ligatures: normal; 
    font-variant-numeric: normal; 
    font-weight:`enter code here` normal; 
    cursor: auto; 
    position: relative; 
    top: -26px; 
    background: url("../img/mag.png") no-repeat right 0; 
}

Und wenn Sie das Bild (Vergrößerungsglas) auf die Schaltfläche auf der rechten wollen, ist der Code wie folgt:

.fb { 
background: url("../img/mag.png") no-repeat right 0; 
width:15px; 
height:14px; 
display:inline-block; 
float:right; 
    }

Quelle

2017-07-05 16:11:11 user6297534

Sie sollten hinzufügen Hintergrundbild auf die Schaltfläche statt mit einem i-Tag. i-Tags werden in HTML für alternative Textstimmungen verwendet. zB kursiv setzen usw.

Der Grund, warum sie von font-awesome und bootstrap zum Anzeigen von Icons übernommen wurden, lag hauptsächlich daran, dass sie standardmäßig Inline-Block sind und effizient sind. Aber die Art, wie sie es tun, besteht darin, eine Schriftartendatei hinzuzufügen, statt ihre Hintergrundeigenschaft zu verwenden

Hier sollten Sie den Hintergrund hinzufügen und eine bestimmte Höhe und Breite angeben.

<button value="1" class="tools fa" aria-label="Search" type="submit"> 
</button> 

.fb { 
    background: url("../img/mag.png") no-repeat 0 0; 
    background-size: 50px 50px; 
height:45px; 
    width:50px; 
    }

Quelle

2017-07-05 16:14:42

Ihre <i class=fb></i> hat keinen Textinhalt. Sofern Sie in Ihrem CSS keine Höhe und Breite angeben, bleibt Ihre Schaltfläche unberührt. Versuchen Sie, diese zu .fb

.fb{ 
    height:50px; /*Assuming 50px because your background-size is 50px*/ 
    width:50px; 
    display:block; /*Because height won't take effect on 'inline' elements*/ 
}

Lassen Sie mich wissen, wie es geht.

Quelle

2017-07-05 16:31:56

Ich versuche, ein Suchfeld wie Facebook mit einem Knopf auf der rechten Seite und ein Suchsymbol auf der Oberseite des Knopfes zu bauen ... Also, was zu tun .. ?? Der obige Code funktioniert nicht für mich .. :( – Sayury

Warum nicht das Bild im HTML selbst innerhalb der Schaltfläche hinzufügen und fügen Sie eine alt = Suche? –

Hintergrundbild unter Verwendung der Hintergrundbildeigenschaft, die nicht erscheint, um die gewünschte Anzeige nicht zu erhalten

Antwort

Verwandte Themen