：after＆：before背景img不顯示

Question

我正在嘗試向div中添加框架設計，如下例所示：

金框div設計

我嘗試使用背景圖片進行此操作，但由於它必須具有響應性，因此無法正常運行。 現在，我嘗試使用（：before＆：after）進行此操作，但是圖像不會出現。 我在后面留下一行代碼了嗎？ 幫助贊賞！

問題：問題 圖片

// 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;）＆（position：relative;）添加到主div中。 謝謝您也建議使用圖像邊框。

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