如何在同一div中设置两张背景图并实现相等上下边距？

你只需要调整background-position-y的值，用具体边距数值结合calc()函数，就能让两张背景图保持相等的上下边距：

修改后的CSS代码（以50px边距为例） #

.license-info {
  width: 100%;
  height: 800px;
  background: #181f2b;
  background-image: url('/images/footerdiamondchain.png'), url('/images/footerdiamondchain.png');
  background-repeat: repeat-x;
  background-position-y: 50px, calc(100% - 50px);
}

原理说明 #

• 将顶部背景图的垂直位置从top改为目标边距值（比如50px），它会自动距离容器顶部50px；
• 底部背景图用calc(100% - 50px)，表示它距离容器顶部的距离为容器高度的100%减去50px，正好对应距离容器底部50px；
• 若想用百分比边距（比如边距占容器高度的10%），直接写成background-position-y: 10%, 90%;即可，顶部距离10%、底部距离10%，同样保持等距。

你可以根据截图里的实际效果，替换代码中的数值调整边距大小。

内容的提问来源于stack exchange，提问作者Sohaib Ashraf