html - 右边的补充图

Question

我想创建一个包含两张图片的背景图片，但我无法将第二张图片补充到右边。

我无法让它看起来像一张完整的图片，而是在一个地方。

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.home-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.left-content {
  background: url(../img/leftwing.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  float: left;
  position: absolute;
  border-right: 1px solid black;
  left: 0;
}

.right-content {
  background: url(../img/rightwing.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 50%;
  float: right;
  position: absolute;
  border-right: 1px solid black;
  right: 0;
}

<div class="home-wrapper">
  <div class="left-content">
    a
  </div>
  <div class="right-content">
    a
  </div>
</div>

我没有把它做成整个背景的原因是当你将鼠标悬停在它们上面时，这两个有不同的功能。

这是我想要的样子:

这就是我所拥有的:

Answer 1

您可以通过在 css 中添加背景位置来达到预期的效果。试试这个代码。

.left-content{
    background: url(../img/leftwing.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 50%;
    float: left;
    position: absolute;
    border-right: 1px solid black;
    left: 0;
}
.right-content{
    background: url(../img/rightwing.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 50%;
    float: right;
    position: absolute;
    border-right: 1px solid black;
    right: 0;
}