邊界上方的背景圖片

我不明白。我想帶箭頭的簡單線條，所以我使用一類具有邊框和背景圖像：邊界上方的背景圖片

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

邊界上方的背景圖片

回答

相關問題