CSS背景/边框[关闭]

Question

我的背景有问题，它不会出现在边框图像后面。

我希望.section div背景变为信息框和边框的全宽度，即在.info-box div的边框之后。

我把它放在小提琴上，这样您就可以看到它在做什么： https : //jsfiddle.net/gof6yrrL/1/

的HTML

<div class="info-box">
    <div class="section"></div>
    <div class="spacing"></div>
    <div class="section"></div>
</div>

的CSS

.info-box {
    margin-top: 20px;
    position: relative;
    border: 18px solid transparent;
    -webkit-border-image: url(http://goo.gl/sMJorg) 18 round;
    -o-border-image: url(http://goo.gl/sMJorg) 18 round;
    border-image: url(http://goo.gl/sMJorg) 18 round;
    background-color: #000;
    border-radius: 5px;
}
.section {
    height: 300px;
    width: 100%;
    border-bottom: 1px solid #103b49;
    background: #0a2629 url(http://goo.gl/K3oEje) top center repeat-x;
}
.spacing {
    margin-bottom: 10px;
}

边框在其下方的内容上具有内部阴影，因此为什么我希望背景位于其后。

Answer 1

不幸的是， .section div不能像您正在寻找的那样直接在其父元素的边框下方延伸，因为该边框是父元素的一部分，并且子元素可以在父元素的上方或下方，但不能同时位于两者之上。

我建议您做的是改为创建一个新的div，该div覆盖当前的div，该div包含边框，但具有pointer-events: none; 进行设置，以便您仍然可以点击浏览内容：

JSFiddle： https ：//jsfiddle.net/gof6yrrL/3/

 .info-box { margin-top: 20px; position: relative; background-color: #000; border-radius: 5px; } .section { height: 300px; width: 100%; border-bottom: 1px solid #103b49; background: #0a2629 url(http://goo.gl/K3oEje) top center repeat-x; border-radius: 5px; } .spacing { margin-bottom: 10px; } .info-box-border { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 18px solid transparent; -webkit-border-image: url(http://goo.gl/sMJorg) 18 round; -o-border-image: url(http://goo.gl/sMJorg) 18 round; border-image: url(http://goo.gl/sMJorg) 18 round; border-radius: 5px; pointer-events: none; } 

 <div class="info-box"> <div class="section"></div> <div class="spacing"></div> <div class="section"></div> <div class="info-box-border"></div> </div>