边框图像和背景颜色填充答案

【问题标题】：border-image and background color filling边框图像和背景颜色填充
【发布时间】：2015-05-09 11:22:05
【问题描述】：

我有一个使用边框图像的 div。边框宽度为 33 像素，但图像不填充总宽度并且具有透明度。我想要一种背景颜色，可以完全填满我的边框内部。

这是我附带的代码： 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 中的所有元素都无法点击，因为图层在后面...

关于是否：

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

提前感谢您的帮助。

【问题讨论】：

标签： php css z-index border-image

【解决方案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;
    }

【讨论】：

这没有任何帮助。

【解决方案2】：

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

了解这一点的一些参考资料：

1) 请阅读此About z-index for child and parent

2) 还有这个Image frame border and z-index

【讨论】：

不，使用此解决方案，我的背景颜色与边框图像的角重叠，这正是我要避免的！
抱歉没看到！检查THIS ONE 它可能会帮助你。我必须将单选按钮和文本的内容包含在与内容 div 无关的单独 div 中。