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将不会加载，而在chrome中检查所有.backgroundview：after被禁用;我想我不能有两个：之后，但我怎么能避免这个？

Answer 1

您没有设置容器.backgrounddownload position: relative，在这种情况下，您将它们放置在与身体相关的位置。将position: relative添加到容器可让您控制absolute个元素。

在你的css中添加：

.backgrounddownload {
  position: relative;
}

Fiddle

<强>更新

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

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

Updated Fiddle

图片不会显示html + css

1 个答案: