如何将边框线放在图像下？

Question

我无法找到问题的解决方案，所以我发布了这个主题。希望有人能帮助我。

如上图所示。在＆＃34;服务提供＆＃34;中，图像叠加边框线。我试过但不能这样做。这是我的代码：

http://codepen.io/thehung1724/pen/iykFu

希望有人能帮助我。提前谢谢。

Answer 1

我不确定我是否明白你的观点，但如果我是对的，我建议使用两行。

&:before,&:after{
    border-top: 1px solid #999;
    content: '';
    position: absolute;
    top: 42%;
    width: 30%;
}
&:before{
    left: 50%;
 margin-left: 20px;
}
&:after{
  right: 50%;
margin-right: 20px;
}

http://codepen.io/anon/pen/Bovgm

Answer 2

您应该将当前位于CSS下面的png放置在CSS中，如下所示：

.medium-seperator {
  background:url('transparent.png') repeat-x #c00;
  height:25px;
  display:block;
}

然后将线放在后面，使图像显示在顶部：

&:after{
    margin: 0 auto;
    border-top: 1px solid #fff;
    content: '';
    position: absolute;
    top: 42%;
    width: 80%;
    left: 0;
    right: 0;
}

通过这种方式，您可以获得所需行中的差距。或者只是为边框和小图标创建一个图像。不知道为什么你需要在那里生成边框。让整个事情成为一个png。