如何在边框上方显示背景图像？答案

【问题标题】：How to show background image above border?如何在边框上方显示背景图像？
【发布时间】：2014-06-03 18:16:21
【问题描述】：

我的标签从左边开始有 25 像素的填充和 15 像素的边框。我在其中使用箭头背景图像。是否可以在边框上方显示此背景图片？

这里是 HTML

<a id="arrow">List</a>

CSS

a#arrow { 
    background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
    padding-left:25px;
    border-left:15px solid #f1f1f1;
}

这里是jsfiddle link

【问题讨论】：

这里有一个简单的可能的解决方案是使用多背景功能，而不是使用border-left，您可以尝试使用linear-gradient来模仿border-left，将其指定为第二背景，虽然第一个是您的箭头图像，它将位于线性渐变背景之上，请检查此Demo 当然，某些旧版本的浏览器不支持多背景，尤其是 IE 。但是，如果是我，我永远不会在意这些。
您必须以其他方式实现边框..因为您不能让元素的背景位于相同元素边框的顶部..您要么必须拆分为两个元素（可以使用 :after)，或使用多个背景并模仿边框。

标签： css

【解决方案1】：

你可以把你的背景作为一个方法放到 :after 元素中

CSS

#arrow:after {
    content:'';/*enable after element*/
    position: absolute;
    top: px;/*position of the background*/
    left: px;/*position of the background*/
    background: url(img/your-bg.png)  no-repeat;
    width: px;/*width of the background*/
    height: px;/*height of the background*/
}

并且不要忘记添加位置：相对于#arrow

【讨论】：

是的，这会起作用，但我希望它用其他方式来做，因为 :after 受 IE8 支持。
@Gajen 您需要支持 IE7+ 或更早版本吗？

【解决方案2】：

您可以使用背景位置来查看您的图像。这里是fiddle

你的 CSS 应该是

a#arrow{ background:url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-back-20.png') no-repeat;
padding-left:25px;
border-left:15px solid #f1f1f1;
background-position: -36px;
}

【讨论】：

这不会将图像放在边框上方
你检查过小提琴吗..它没有显示，因为定义背景图像属性的标签的大小更小..那是我要求你用背景位置调整它..添加一个像border: 1px solid black这样的属性来知道你的标签的大小并增加它的宽度和高度，这样你就可以看到完整的图像
@nidhin，你能给我做个小提琴吗？
我的回答 ryt 中有一个小提琴。它不工作？
@Gajen 我已经编辑了我的答案.. 现在检查小提琴

【解决方案3】：

使用带有像素值的background-position 属性将它们显示在顶部。

例如，

background-position: xxpx (for left-right) xxpx (for top-bottom);

PS：xx 是一个虚拟值，可以用实际数字代替。

【讨论】：

我试过 background-position 但背景图片显示在边框后面。还有其他方法吗？
还添加，position:relative; 和 z-index:999; 然后它将起作用。 - @Gajen