Question

我的背景有问题，它不会落后于边框图像。

我希望IOException div背景显示信息框和边框的全宽，即.section div的边框后面。

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

HTML

.info-box

CSS

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

边框在其下方的内容上有一个内部阴影，因此我希望背景能够落后于它。

Answer 1

不幸的是.section div不能像你想要的那样直接在其父元素的边界下面扩展，因为边框是父元素的一部分，而子元素可以高于或低于它，但不是两者。

我建议你做的是制作一个新的div，它覆盖你当前的div，包含边框，但设置了pointer-events: none;，这样你仍然可以点击你的内容：

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS背景/边框

1 个答案: