表

Question

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

Answer 1

您可能需要将图像分割为4个边框才能获得效果。您还需要修改背景图像。

我无法访问Photoshop或类似的内容，所以我已经分配了你的jsfiddle并添加了4个空的粉红色框，你应该添加你的分割图像（右上角，左上角，左下角，下边角）。 / p>

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>

Answer 2

在表格中使用CSS border-image属性实质上将表格的z-index锁定到图像。如果您满足于调整表格的大小以使其适合图像定义的边框内，则可能会有效。

否则，要在边框图像上使用z-index，您需要将边框图像标记作为其自己的元素与表格的标记分开。请参阅此SO Q&A for this approach。