Hintergrundbilder nicht mit einer href

Question

angezeigt Ich habe 2 Links. Der 2. Link hat 2 Hintergrundbilder, diese Bilder dienten als Icons. Aber die Bilder werden nicht angezeigt.

Wie behebt man das?

<div class="btn-group btn-group-justified row" data-toggle="buttons"> 
<div class="col-xs-5"> 
<a class="btns btns-small btn btn-default btn-block" role="button" href="/example/"><span class="calculator">Click here</span></a> 
</div> 
    <div class="col-xs-5"> 
     <a class="icon-payment-app icon-payment-app-arrow btns btns-small btns-app btn btn-default btn-block" role="button" href="/login/">Login Now</a> 
</div> 
</div> 

CSS:

.btn-group{ position: relative; top: 26em; left: 5.50em; } 
.btn-group-justified{ width: 50%; } 
.btn-group .btn-default{ margin: 0; } 
.col-xs-5:first-child a{ padding: 1.15em; } 
.col-xs-5:last-child a{ padding: 1.25em 0.15em 1.25em 1.75em } 
.icon-payment-app:before{ background: url(/files/icon-mypayment.png); background-position: left center; background-repeat: no-repeat; background-size: 1.50em 1.50em; vertical-align: middle; position: relative; left: 0.25em; } 
icon-payment-app-arrow{ padding: 2em; } 
.icon-payment-app-arrow:before{ background: url('/files/icon-mypayment-arrow.png'); background-position: right center; background-repeat: no-repeat; vertical-align: middle; } 

Bilder

Answer 1

Es gibt zwei Probleme mit Ihrem Code.

Zuerst verwenden Sie :before, wodurch ein leeres Element erstellt wird, das mit Ihrem identisch ist. Dies ist ein inline Element (<a>). Ein leeres Element inline hat keine Höhe oder Breite, daher wird kein Hintergrund angezeigt. Inhalte hinzufügen, Höhe, Breite, und zeigt es als inline-block und der Hintergrund erscheint:

content: " "; 
display: inline-block; 
height: 20px; 
width: 20px; 

Zweitens beiden Klassen icon-payment-app und icon-payment-app-arrow mit dem gleichen Elemente hinzugefügt, so dass sie beide die gleichen :before. Du musst sie trennen.

EDIT: Sie können :before für das linke Bild verwenden und :after für die zweite wie folgt aus (die Höhe und Breite nach Ihren Wünschen ändern, und Sie können auch einige padding oder Margen hinzugefügt werden):

.btn-group{ position: relative; top: 26em; left: 5.50em; } 
 
.btn-group-justified{ width: 50%; } 
 
.btn-group .btn-default{ margin: 0; } 
 
.col-xs-5:first-child a{ padding: 1.15em; } 
 
.col-xs-5:last-child a{ padding: 1.25em 0.15em 1.25em 1.75em } 
 
.icon-payment-app:before{ content: " "; display: inline-block; height: 20px; width: 20px; background: url('https://i.stack.imgur.com/DxUkr.jpg'); background-position: left center; background-repeat: no-repeat; background-size: 1.50em 1.50em; vertical-align: middle; position: relative; left: 0.25em; } 
 
icon-payment-app-arrow{ padding: 2em; } 
 
.icon-payment-app-arrow:after{ content: " "; display: inline-block; height: 20px; width: 20px;background: url(https://i.stack.imgur.com/tpvG9.png); background-position: right center; background-repeat: no-repeat; vertical-align: middle; }

<div class="btn-group btn-group-justified row" data-toggle="buttons"> 
 
<div class="col-xs-5"> 
 
<a class="btns btns-small btn btn-default btn-block" role="button" href="/example/"><span class="calculator">Click here</span></a> 
 
</div> 
 
    <div class="col-xs-5"> 
 
     <a class="icon-payment-app icon-payment-app-arrow btns btns-small btns-app btn btn-default btn-block" role="button" href="/login/">Login Now</a> 
 
</div> 
 
</div>

Answer 2

Wie wäre es CSS3 Hintergrundbild? Sie können zwei Bilder in derselben Klasse platzieren. Unten ist ein Beispiel.

.btn-group{ position: relative; top: 26em; left: 5.50em; } 
 
.btn-group-justified{ width: 50%; } 
 
.btn-group .btn-default{ margin: 0; } 
 
.col-xs-5:first-child a{ padding: 1.15em; } 
 
.col-xs-5:last-child a{ padding: 1.25em 0.15em 1.25em 1.75em } 
 
.icon-payment-app{ background: url(https://i.stack.imgur.com/DxUkr.jpg), url('https://i.stack.imgur.com/tpvG9.png'); background-position: 10px 20px, right center; background-repeat: no-repeat; background-size: 1.50em 1.50em; vertical-align: middle; position: relative; left: 0.25em;display:inline-block; width:200px; text-align:center; line-height:30px;border:1px solid #fff000;} 
 
icon-payment-app-arrow{ padding: 2em; } 
 
/*.icon-payment-app-arrow{ background: url('https://i.stack.imgur.com/tpvG9.png'); background-position: right center; background-repeat: no-repeat; vertical-align: middle; }*/

<div class="btn-group btn-group-justified row" data-toggle="buttons"> 
 
<div class="col-xs-5"> 
 
<a class="btns btns-small btn btn-default btn-block" role="button" href="/example/"><span class="calculator">Click here</span></a> 
 
</div> 
 
    <div class="col-xs-5"> 
 
     <a class="icon-payment-app icon-payment-app-arrow btns btns-small btns-app btn btn-default btn-block" role="button" href="/login/">Login Now</a> 
 
</div> 
 
</div>

Hinweis, wenn Sie die gleiche Klasse anderswo die Hintergrundbilder verwenden als auch auf das sein. Hoffe, das ist es, wonach Sie suchen.

Oh, und ich habe die vor und nach dem Selektor ;-) entfernt