背景图像未显示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作为第二个像这样（根据自己的喜好修改高度和宽度，你也可以想要添加一些填充或边距）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

CSS3背景图片怎么样？您可以在同一个班级上放置两个图像。以下是一个例子。

＆＃13;

＆＃13;

.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;  }*/

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请注意，如果您在其他任何地方使用相同的类，那么背景图片也会在其中。希望这就是你所追求的。

哦，我已经删除了前后选择器; - ）