Question

我有2个背景图片，我需要像本版本中那样彼此垂直对齐 image

现在，我将样式设置为：

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>

ref。
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个背景图像相等

2 个答案: