使 2 个背景图像相等

Question

我有 2 张背景图片，我需要它们在垂直方向上彼此相等，就像在这个版本中一样 image

现在我将样式设置为：

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

但是，图像的相等性仅在我在此视口上查看时保持不变。当我退出检查工具时，它搞砸了并调整了它的大小。

我已经尝试了 calc() 和其他背景位置，但我无法解决它。

感谢任何帮助。

Answer 1

我认为这应该可以解决问题。之所以将第一个背景应用到body上，是为了当宽度的像素数为奇数时，中间不会出现白线。

*{
  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/

使 2 个背景图像相等

Make 2 background images equal

css

image

image-scaling