桌面上的邊框圖像

我一直在尋找Z-index來將我的邊框圖像放置在桌面及其內容上。我已經設法讓文字向後退，但我似乎無法讓所有的表格向後或向前傳送圖像。我在課堂上加了tr。桌面上的邊框圖像

position: absolute; //static ,relative ,fixed, absolute 
    z-index: -1;

http://jsfiddle.net/wayneker/5v1abef2/5/

td + td { 
    border-left:1px solid #eee; 
} 
td, th { 
    border-bottom:1px solid #eee; 
    background: #ddd; 
    color: #000; 
    padding: 2px 10px; 
} 

.tableBorder { 
    -webkit-border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch; 
     -moz-border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch; 
     -o-border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch; 
      border-image: url("http://www.ahoymearty.co.uk/basebubble/images/border.png") 30 stretch; 

    // border-top-width: 50px; 
    // border-right-width: 20px; 
    // border-bottom-width: 10px; 
    // border-left-width: 20px;   
     border-width: 50px 20px 10px 20px; 
}

來源

2016-11-22 Wayne Gilliver

您可能需要將圖像分成4個邊界得到實現的效果。您還需要修改背景圖片。

我沒有訪問到Photoshop或類似的東西，所以我已付出你的jsfiddle並添加4個空盒粉紅色，你應該添加您的分裂圖像（右上，左上，左下，底部）。

http://jsfiddle.net/w0vbvggv/1/

我已經在每個盒子上內嵌了CSS。

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; top: 0px; background:#ff00ff; display: block;"> 
top left image 
</div> 

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; top: 0px; right: 0; background:#ff00ff; display: block;"> 
top right image 
</div> 

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; bottom: 0px; left: 0; background:#ff00ff; display: block;"> 
bottom image left 
</div> 

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; bottom: 0px; right: 0; background:#ff00ff; display: block;"> 
bottom image right 
</div>

您也可以使用這樣jsfiddle元素相同的背景圖片。我用上面的圖片把它們放在一邊。

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; top: 0px; background:url(https://i.stack.imgur.com/e6CO5.png); display: block;"> 
top left image 
</div> 

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; top: 0px; right: 0; background:url(https://i.stack.imgur.com/e6CO5.png) top right; display: block;"> 
top right image 
</div> 

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; bottom: 0px; left: 0; background:url(https://i.stack.imgur.com/e6CO5.png) bottom left; display: block;"> 
bottom image left 
</div> 

<div style="position:absolute; z-index: 100; width: 70px; height: 70px; bottom: 0px; right: 0; background:url(https://i.stack.imgur.com/e6CO5.png) bottom right; display: block;"> 
bottom image right 
</div>

來源

2016-11-22 13:52:27

左上角和右下角是相同的圖像但翻轉了，底部的 –

也會絕對正常工作，當表格水平和垂直擴展時？ –

這不應該是一個問題！我已經將圖像添加到原始文章中，您需要揭示背景圖像。 –

在您的表格中使用CSS border-image屬性本質上會將表的z-index鎖定到圖像。如果您滿足於調整表格的大小以適合圖像所定義的邊界，這可能會有效。

否則，要在邊框圖像上使用z-index，需要將邊框圖像標記作爲其自己的元素與表格的元素分開。請參閱此SO Q&A for this approach。

來源

2016-11-22 13:53:40 JohnH

桌面上的邊框圖像

回答

相關問題