时间戳

首页 > 解决方案 > 如何在两侧覆盖 2 个图像作为背景图像

html - 如何在两侧覆盖 2 个图像作为背景图像

问题描述

我刚开始使用 HTML 和 CSS，我正在尝试制作一个包含 2 张图片的页面，一张图片覆盖整个左侧，另一张覆盖右侧。这两个图像都必须是可点击的，并且可以在不同的分辨率下工作。

我尝试从 2 个图像中制作 1 个图像并使用坐标使它们可点击。我注意到这不适用于不同的分辨率，因此不起作用。我也试图让它们覆盖侧面，但这也不适用于不同的分辨率。我也不能为此使用 javascript，只能使用 HTML 和 CSS（学校项目）。

这是我尝试过的其中一件事：

html {
  background-image: url(img1.png), url(img2.png);
  background-position: left, right;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

预期结果：2张图片，1张在左边，另外一张在右边，都覆盖了两侧

实际结果：2 张图像相互堆叠

标签： htmlcss

解决方案

我只是改变为background-size: 50% auto, 50% auto;

                  for first image   for second image
background-size:  xSize ySize,      xSize ySize;


html {
  background-image: url(https://picsum.photos/1280/720), url(https://picsum.photos/1920/2080);
  background-position: left, right;
  background-repeat: no-repeat, no-repeat;
  background-size: 50% auto, 50% auto;
}

推荐阅读