不以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>

注意，如果你使用相同的类其他地方的背景图像将是这一点。希望这是你以后的样子。

哦，我已删除了之前和之后的选择;-)