将图像补充到右侧

Question

我想创建一个有两个图像的背景图像，但我无法补充右边的第二个图像。

我无法让它看起来像一张照片，但在一个地方。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

这就是我想要的样子：

这就是我所拥有的：

Answer 1

将background-position添加到.right-content和.left-content

.right-content {
  background-position: left center;
  width: 50%; /* << this was 100%, typo? */
}
.left-content {
  background-position: right center;
}

Answer 2

您可以通过在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;
}