html - 边框上方的背景图片

Question

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

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

不幸的是，背景低于边界：

我试过z-index了，“id beats class”（用<hr id="arrow">）但没有任何效果。有解决办法吗？

顺便说一句，css-cracks如何用箭头做这样的虚线？

Answer 1

​<strong>编辑：我一直在考虑在没有 :after 的情况下这样做，只是因为我不喜欢被否决:)

我能想到的最好的是：

.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 中的多个背景，因此它不会得到大规模支持，但可以工作并且是一种相当有趣的方式 - http://jsfiddle.net/spacebeers/T8Yzj/39/

图像需要像填充一样进行调整，但结果是合理的。

Answer 2

背景图像总是被容器边框包裹。

请参阅：http ://reference.sitepoint.com/css/boxmodel

您将需要下面的附加元素来添加箭头。这可以通过: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;
}

Answer 3

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

<hr class="arrow">

CSS：

.arrow {
    position:relative
}

.arrow:after {
    content: "";
    position:absolute;
    top:0px;
    left:100px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;    
    border-top: 10px solid #000;
}

小提琴