Html 边界上方的背景图像

我不明白。我想要一条带箭头的简单线条，所以我使用了一个带边框和背景图像的类：

hr {
    padding-top: 10px;
    border: none;
    border-top:dotted #000 1px;
    background: #fff url("img/arrow.gif") no-repeat 100px -1px;
 }

不幸的是，背景在边界以下：

我尝试了

z-index

，“id胜过class”（使用

）但没有任何效果。有解决办法吗

---

顺便说一句，css裂缝是如何形成这样一条带箭头的虚线的？

​编辑：我一直在考虑在没有：之后的情况下执行此操作，只是因为我不喜欢被否决：）

我能想到的最好办法是：

.box3 {
    z-index: 100;
    border: none;
    padding: 10px 0 30px 0;    
    background-image: url("http://test.mark-design.co.uk/4ik4e7ic.png"), url('http://test.mark-design.co.uk/line.png');
    background-position: 50% -1px, left top;
    background-repeat: no-repeat, repeat-x;
}

它使用CSS3中的多个背景，因此它还不会得到大量支持，但它可以工作，并且是一种相当有趣的方式-

---

图像需要调整，填充也需要调整，但效果很好。

考虑使用CSS三角形而不是图像：

<hr class="arrow">

---

背景图像始终由容器边框包裹

见：

您需要在下面添加一个附加元素来添加箭头。这可以通过在所需元素上使用

：after

来实现

/* not tested */
hr {
    position: relative;
    margin-top: 10px;
    border-bottom: 1px dotted #000;
}

hr:after {
    content: "";
    position:absolute;
    right: 0px; top:0px;
    width: 16px; height: 16px;
    background: transparent url("img/arrow.gif") no-repeat right top;
}

---

你的arrow.gif是透明的吗？我想位置-1是不够的，试试，-2或-3只是使用了一种不带-jsfiddle.net/spacebeers/T8Yzj/39的方法。我只是想在我工作的时候迅速放下一些东西…他有这个形象，不想用CSS来完成，所以他做不到。他需要CSS。当你在做一些更大更好的事情时，只是草草记下一个糟糕的答案是不好的做法。。。这不是一场比赛。他当然可以做到，他有那个三角形gif，但你不应该得到-1，你的解决方案没有错，只是不适用于他所要求的，只是用了一种方法来做到这一点，没有：之后-很好，谢谢你，在FF中效果很好。在IE（9.x）和Opera中，我只看到了虚线。在Chrome中，我看到箭头，但虚线边框穿过。。。所有浏览器都有解决方案吗？还是最好将箭头作为一个整体图像绘制这样一条涂鸦线？背景剪辑可以覆盖该规则，并且您可以在边框下运行背景图像：@worc由于此答案最初已发布，

背景剪辑

属性未准备好跨浏览器使用。你也可以更新答案而不是否决它…@feeela我可以，但它会彻底改变答案的内容。我有多余的分数，所以我做了下一个最好的事情，把答案往下推，并提供了一些我遇到的新信息。

/* not tested */
hr {
    position: relative;
    margin-top: 10px;
    border-bottom: 1px dotted #000;
}

hr:after {
    content: "";
    position:absolute;
    right: 0px; top:0px;
    width: 16px; height: 16px;
    background: transparent url("img/arrow.gif") no-repeat right top;
}