Question

我有一个使用边框图像的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中的所有元素都是不可点击的，因为该层落后......

是否有任何想法：

使元素可点击
使用与我不同的解决方案获得相同的视觉效果，而这些解决方案不会使元素无法点击？

提前感谢您的帮助。

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）请阅读About z-index for child and parent

2）这个Image frame border and z-index

边框图像和背景颜色填充

2 个答案: