带有 :before 和 :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 和bottom 属性。