：之后＆amp; ：在背景img没有显示之前

Question

我尝试将帧设计添加到div中，如下例所示：

Gold frame div design

我尝试使用背景图片进行此操作但不像我想要的那样工作，因为它必须具有响应性。现在我尝试用（：之前和之后）来做这件事但是图像不会出现。我是否留下了一行代码？帮助赞赏！

问题： Picture of problem

// HTML

<div class="second-section">
<div class="container">
  <div class="purp-box">
    <h1>Welcome to my site!</h1>
    <p>Some text goes here.</p>
  </div>
</div>

// CSS

.purp-box {
  height: 303px;
  background: url(../images/box-background.png);
}

.purp-box:after,
.purp-box:before {
  content: '';
  position: absolute;
  top: 0;
}

.purp-box:before {
  width: 67px;
  height: 303px;
  background: url(../images/purp-left-border.png) no-repeat;
  right: 100%;
}

.purp-box:after {
  width: 67px;
  height: 303px;
  background: url(../images/purp-right-border.png) no-repeat;
  left: 100%;
}

Answer 1

我想通了，我所要做的就是添加（box-sizing：border-box;）＆amp; （位置：相对;）到主div。感谢您建议使用图像边框。

.purp-box {
  height: 303px;
  background: url(../images/box-background.png);
  box-sizing: border-box;
  position: relative;
}