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

Question

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

例如

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

此代码将设置两张图片作为背景，当您向下滚动页面时一张图片结束时，下一张图片立即开始。两者之间没有视觉上的过渡，只是一张接一张的两张图片，看起来没有视觉吸引力。

Answer 1

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