hrefで表示されない背景画像

Question

私は2つのリンクを持っています。 2番目のリンクには2つの背景画像があり、この画像はアイコンとして機能します。しかし、画像は表示されません。

これを修正するにはどうすればよいですか？

<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; } 

画像

Answer 1

あなたのコードには2つの問題があります。

まず、:beforeを使用します。これは、inline要素（<a>）である、あなたと同じ空の要素を作成します。空のinline要素には高さや幅がないため、背景が表示されません。コンテンツ、高さ、幅を追加し、inline-blockとして、それを表示し、背景が表示されます。

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

第二に、あなたのクラスicon-payment-appとicon-payment-app-arrow両方が同じ要素に追加し、そのどちらも同じ:beforeを共有しています。あなたはそれらを分けなければなりません。

EDIT：あなたは（あなたの好みに合わせて高さと幅を変更して、あなたはまた、いくつかのパディングやマージンを追加したい場合があります）、このような1秒間左画像と:afterため:beforeを使用することができます。

CSS3の背景画像について

.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

どのように？同じクラスに2つの画像を配置することができます。以下は例です。

.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>

注あなたはどこか他の同じクラスを使用する場合は、背景画像は、同様にその上になります。これがあなたの後であることを願っています。

ああ、私は.icon決済アプリと呼ばれる自分のクラスに前後のセレクタ;-)