多个背景图像之间的边界？

Question

在CSS中，我可以使用background：属性设置多个背景图像，但是当这些图像出现在页面上时，没有过渡，它们之间的边缘看起来很难看。有没有办法在两个连续背景之间实现阴影边界线？

e.g。

#main-body{
    background: #222222 url(background.jpg), url(background2.jpg);
}

此代码会将两个图像设置为背景，当一个图像结束时，向下滚动页面时，下一个图像会立即开始。两者之间没有视觉上的过渡，它只是一个接一个的两个图像，看起来并不吸引人。

Answer 1

处理这种情况的最佳方法是在图像的顶部和底部绘制具有所需颜色和所需宽度的边框。您可以使用任何图像编辑器执行此操作，这也可以使您的任务更简单。