不以href顯示背景圖片

Question

我有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

有你的代碼的兩個問題。

首先，您使用:before，它創建一個與您的元素相同的空元素，它是一個inline元素（<a>）。空的inline元素沒有高度或寬度，因此不會顯示背景。添加內容，高度，寬度，並將其顯示爲inline-block和背景將出現：

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

其次，無論你的類icon-payment-app和icon-payment-app-arrow被添加到相同的元素，所以他們都有着相同的:before。你必須將它們分開。

編輯：您可以使用:before對於第二個這樣的左圖像和:after（修改高度和寬度根據自己的喜好，你也可能要添加一些填充或利潤）：

.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

如何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{ 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>

注意，如果你使用相同的類其他地方的背景圖像將是這一點。希望這是你以後的樣子。

哦，我已刪除了之前和之後的選擇;-)