边界上方的背景图片

我不明白。我想带箭头的简单线条，所以我使用一类具有边框和背景图像：边界上方的背景图片

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

不幸的是，背景是边框下方：

enter image description here

我试过z-index， “id节拍类”（与<hr id="arrow">），但没有奏效。有解决方案吗？

顺便说一句，CSS的裂缝如何做这样一个带箭头的虚线？

来源

2012-07-25 Bazi

是你的arrow.gif透明吗？ – Deekor 2012-07-25 15:50:22

我猜-1的位置是不够的，尝试，-2或-3 – 2012-07-25 15:51:04

只是想出了这样做的方式没有：之后 - jsfiddle.net/spacebeers/T8Yzj/39 – SpaceBeers 2012-07-25 16:28:58

编辑：我一直在寻找这样做没有：之后，仅仅是因为我不喜欢被downvoted :)

我能想出的最好的是这样的：

.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/

的图像需要调整一样填充但结果却是如此UND。

来源

2012-07-25 15:50:15 SpaceBeers

这是一个答案？ – feeela 2012-07-25 15:51:19

这将是。只是想在我工作的时候迅速弄下东西...... – SpaceBeers 2012-07-25 15:51:50

他有图像，不想用CSS完成 – 2012-07-25 15:51:57

考虑使用，而不是像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

来源

2012-07-25 15:52:58

优雅的方式，但它不适用于虚线设计，对吧？ – Bazi 2012-07-25 16:38:23

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

请参见：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; 
}

来源

2012-07-25 15:56:58 feeela

只是想出了这样做的方式没有：后 - http://jsfiddle.net/spacebeers/T8Yzj/39/ – SpaceBeers 2012-07-25 16:25:50

很好，谢谢你，在FF工程perfekt。在IE（9.x）和Opera中，我只看到了虚线。在Chrome浏览器中，我看到了箭头，但虚线边框经过了......有没有针对所有浏览器的解决方案，还是更好地做这样一个箭头作为一个整体图像这样一个无意识的线？ – Bazi 2012-07-25 16:36:40

背景剪辑可以覆盖该规则，并且您可以在边框下运行背景图片：https：//developer.mozilla.org/en-US/docs/Web/CSS/background-clip – worc 2016-01-17 03:07:37

边界上方的背景图片

回答

相关问题