0

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

是否有任何想法：

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

在此先感谢您的帮助。

4

2 回答 2

0 
  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;
    }
于 2015-03-08T03:36:39.127 回答
0

在回复您的评论时，我更正了jsfiddle，这是另一个解决方案jsfiddle，它通过调整位置和删除 z-index 来切换内容 div 效果更好，在sub-contentz-index 上进行一些搜索后，您拥有的嵌套 div 似乎是问题，因为这样是不可能的。

一些参考资料来理解这一点：

1) 请阅读此关于孩子和父母的 z-index

2）这个图像框架边框和z-index

于 2015-03-08T03:44:57.727 回答