css - 带有 :before and :after 的背景图像

Question

我在响应式网站上有一行，我希望将附加图像作为背景图像放在顶部和底部。我知道这可以通过伪元素 :before 和 :after 来实现，但我不确定该怎么做。
我有一行:

.row {
    background: #444444;
}

那么我如何在之前和之后应用图像呢？ https://www.dropbox.com/s/e9h3w2qqvxqntps/background.svg?dl=0

Answer 1

以这种方式将 :before 和 :after 用于 background-image -

.row:before {
content: url('imageURL');
}
.row:after {
content: url('imageURL');
}

现在您可以使用 position: absolute 定位每个 :before 和 :after 然后调整 top 和底部 属性。