边框图像和背景颜色填充

Question

我有一个使用边框图像的div。边框宽度为 33px，但图像不会填充总宽度并且具有透明度。我想要一种能够准确填充边框内部的背景颜色。

这是我附带的代码：http://jsfiddle.net/kvo8zyr7/1/

.content {
width: 500px;
height: 500px;
border: 33px solid;
border-image: image-url("interface/global/popup_border.png") 33 stretch;
margin: 0 auto;}
.sub-content {
position: relative;
left: -33px;
top: -33px;
width: 500px;
height: 500px;
border-left: 15px solid rgba(0,0,0,0);
border-top: 14px solid rgba(0,0,0,0);
border-right: 15px solid rgba(0,0,0,0);
border-bottom: 14px solid rgba(0,0,0,0);
background-color: #e4e2d7;
background-clip: padding-box;
z-index: -1;}

问题是我在子内容div 中的所有元素都是不可点击的，因为该层在后面......

任何想法是否：

• 使元素可点击
• 使用与我的解决方案不同的解决方案具有相同的视觉结果，不会使元素无法单击？

提前感谢您的帮助。

Answer 1

  Try this
  .content {
        width: 500px;
        height: 500px;
        border-width: 33px;
        border-style: solid;
            -webkit-border-image:url("http://i.imgur.com/SVFLQko.png") 30 30 round; /* Safari 3.1-5 */
        -o-border-image:url("http://i.imgur.com/SVFLQko.png") 33 33 round; /* Opera 11-12.1 */
        border-image:url("http://i.imgur.com/SVFLQko.png") 33 33 round;
        margin: 0 auto;
    }

Answer 2

在回复您的评论时，我更正了 jsfiddle，这是另一种解决方案 jsfiddle，只需通过调整位置并删除 z-index 来切换sub-content内的内容div 来更好地工作，在 z-index 上进行一些搜索后，您拥有的嵌套div 似乎就是问题所在，因为这种方式是不可能的。

一些参考资料可以理解这一点：

1） 请阅读此关于儿童和父母的 z 索引

2）和这个图像框边框和z索引