使两个背景图像相等

Question

我有两个背景图像，它们之间需要垂直相等，就像这个版本中一样图像

现在我的样式设置为：

background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 925px center;

但是，只有当我在该视口上观看时，图像的相等性才会保持不变。当我退出检查工具时，它会弄乱并调整大小。

我试过calc((和其他背景位置，但一直没能解决

感谢您的帮助。

Answer 1

我认为这应该能奏效。第一个背景应用于主体的原因是，当宽度上的像素数为奇数时，在中间不会有白线。

*{
margin:0;
padding:0;
}
body{
background: url(https://www.w3schools.com/w3images/fjords.jpg);
overflow-x: hidden;
}
#right{
background: url(https://www.w3schools.com/w3css/img_lights.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}

<div id="right"></div>

参考
https://css-tricks.com/multiple-backgrounds-left-half-and-right-half/

Answer 2

您也可以通过拥有两个容器来实现这一点，将每个图像放在一个单独的容器中或作为背景(更好(，然后使用flex。用更少的代码更容易。查看此指南https://css-tricks.com/snippets/css/a-guide-to-flexbox/