php - 边框图像和背景颜色填充

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;
    }