css - 图片不会显示 html + css

Question

我试图将两个图像(下载和查看)放在另一个图像之上，这是 HTML:

    <div class="row">

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>

<div class="col-md-3 col-sm-4 col-xs-6 backgrounddownload backgroundview">
    <a href="{site_url}scents/baobab/pearls/black-pearls"><img class="img-responsive" src="123.png"></a>
</div>  

这是 CSS:

.backgrounddownload:after
{
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
background-image: url(dowload.png);
}


.backgroundview:after
{
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 50px;
left: 35px;
background-image: url(view.png);
}

出于某种原因，第二个 div，在这种情况下，dowload.png 不会加载，并且在检查所有 .backgroundview:after 时在 chrome 中被禁用；我想我不能有两个 :after，但我怎样才能避免呢？

Answer 1

您没有设置容器 .backgrounddownload position: relative，在这种情况下，您是在相对于主体定位它们。将 position: relative 添加到容器中将使您能够控制 absolute 元素。

将此添加到您的 CSS 中:

.backgrounddownload {
  position: relative;
}

Fiddle

更新

看来我误解了你的问题。在这种情况下，您也可以使用 :before 而不是 2 :after。

.backgroundview:before {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 5px;
  background: #fff
}

Updated Fiddle