桌面上的边框图像

我一直在寻找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

桌面上的边框图像

回答

相关问题