从背景图像的中心显示文本

Question

我正在尝试从中心显示文本与具有背景图像的元素。如果我将动画的背景设为纯色，那么该纯色会出现在文本周围，直到动画完成。如果我在文本后面放置与包含元素后面相同的背景图像，那么同一图像的不同版本会出现在我的文本周围。有什么建议吗？

html:

<div class="container-big" id="the-wall">
      <div class="chapter-hed">
        <h5>PART 1</h5>
        <h4 class="showhead">My heading</h4>
      </div>
    </div>

css:

#the-wall {
  background-image: url(../img/wopo-3.png);
  background-position: center;
  background-size: cover;
  background-color: black;
}
.chapter-hed h4 {
  font-family: 'proxima-nova';
  font-weight: 700;
  font-size: 5rem;
  letter-spacing: -2.4px;
  line-height: 6.2rem;
  text-align: center;
  color: white;
  margin: 0 auto;
  border-bottom: 10px solid #e40d0d;
}

.chapter-hed h4:before {
left:0;
}
.chapter-hed h4:after {
right:0;
}
.chapter-hed h4:after,.chapter-hed h4:before { 
position:absolute;
content:"";
height:100%;
height: 109px;
/*background:black;*/
background-image: url(../img/wopo-3.png);
  background-position: center;
  background-size: cover;
  background-color: black;

}
.showhead:after, .showhead:before {
    animation: revealText 4s;
    animation-fill-mode:forwards; 
}

@keyframes revealText {
  0% {
     width:50%
    }
  100% {
     width:0%
  }
}

Answer 1

你可以做3层。你想要的图像的底部。正文之间。还是前面的图片，不过这次分成两半。

然后你做与现在相同的动画，但是倒退。（在第三层，逻辑上）

当然有更合适的解决方案，但这是我想到的第一件事

Answer 2

我为您的 class 添加了 2 个包装器。一个向左滑动，另一个向右滑动。最终效果是元素保持居中，并逐渐显示

#the-wall {
  background-image: url(http://lorempixel.com/400/200);
  background-position: center;
  background-size: cover;
  background-color: black;
}

.showheadctn1,
.showheadctn2 {
  width: 100%;
  overflow: hidden;
}

.showheadctn1 {
  transform: translateX(50%);
}

.showheadctn2 {
  transform: translateX(-100%);
}

.showhead {
  font-family: 'proxima-nova';
  font-weight: 700;
  font-size: 5rem;
  letter-spacing: -2.4px;
  line-height: 6.2rem;
  text-align: center;
  color: white;
  margin: 0 auto;
  border-bottom: 10px solid #e40d0d;
  width: 100%;
  transform: translateX(50%);
}

.showheadctn1,
.showheadctn2,
.showhead {
  animation: revealText 4s infinite;
  animation-fill-mode: forwards;
}

@keyframes revealText {
  0% {}
  100% {
    transform: translateX(0%);
  }
}

<div class="container-big" id="the-wall">
  <div class="chapter-hed">
    <h5>PART 1</h5>
    <div class="showheadctn1">
      <div class="showheadctn2">
        <h4 class="showhead">My heading</h4>
      </div>
    </div>
  </div>
</div>

从背景图像的中心显示文本

reveal text from center against a background image

css

background-image

css-animations