在边界上的背景图象

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

编辑：我一直在考虑这样做：之后，仅仅因为我不喜欢被投票：）

我能想出的最好的是：

.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;
}

Fiddle