分割仅在镀铬中重叠h1

Question

我是网络开发的新手，正在创建一个网站组合。我的网站是www.laurenschaller.com。一切都按照我想要的方式运行，除了有时（如果我刷新它，它会恢复正常），当我用chrome打开它时，包裹文本"我是谁"的两个波浪与文本重叠，就像这样https://i.stack.imgur.com/0Kpq9.jpg

这是html：

                    <div class="wave1div">
                    <div id="waveBlue1"></div>
                        <img class="wave1" src="img/loadingwave.png" alt="leftwave">
                    </div>
                    <div class="whoIAm">
                        <h1>WHO I AM</h1>
                    </div>
                <div id="waveBlue2"></div>
                    <div class="wave2div">
                            <img class="wave2" src="img/loadingwave.png" alt="rightwave">
                    </div>
                </div>
    <!-- Waves end -->

以下是我的风格：

.waveHeader {
  text-align: center;
}
.wave1div, .wave2div, .whoIAm {
  display: inline-block;
}
.wave1div, .wave2div, #waveBlue2 {
  position: absolute;
  top: 270px;
}
.wave1, .wave2{
  width: 200px;
  position: absolute;
  display: block !important;
}
#waveBlue2, #waveBlue1 {
  height: 43px;
  background: $blue;
  position: absolute;
  display: inline-block;
  text-align: center;
}
#waveBlue1 {
 width: 0px;
 max-width: 198px;
 right:15px;
 bottom:-43px;
 margin-left: -50px;
}
#waveBlue2 {
  max-width: 200px;
}
.prog-bar1, .wave1 {
  left: -213px;
}

如果其中任何一个编码不正确，我深表歉意。正如我所说，我是一个刚开始学习的人，非常感谢大家的帮助。

Answer 1

我会删除"waves"div，只留下标题，如下所示：

<section class="about">
  <h1>WHO I AM</h1>
</section>

然后添加波浪作为标题本身上的：before和：after伪元素的背景。

.about h1:before, .about h1:after {
    content:'';
    width:200px;
    height:44px;
    display:inline-block;
    background:url('img/loadingwave.png') no-repeat;
    background-color:#86c3c1;
    background-size:200px 44px;
}
.about h1:before {
    margin-right:30px;
}
.about h1:after {
    margin-left:30px;
}

伪元素非常酷，你可以用它们做很多效果。阅读：

学习使用CSS 中的：before And：after伪元素

一整束神奇的东西——伪元素可以实现

另一种方法是将标题的内容放在一个跨度内，如下所示：

<h1><span>WHO I AM</span></h1>

然后，您可以将跨度的背景设置为白色，并将波浪作为h1元素的背景：

.about span {
  background:#FFF;
}
.about h1 {
  background:url('files/wave-orig.png') center repeat-x;
  background-color:#86c3c1;
  background-size:200px 44px;
}

如果你决定采用跨度方式，你必须修复很多标记——使标题块级别的元素，声明适当的高度，调整容器的宽度等。

我只是告诉你这是另一种选择，但伪元素的方式将是最容易在当前布局中实现的。

顺便说一句，我还注意到您在相当多的元素上使用了margin-bottom:rhythm——这不是有效的CSS，也没有任何作用。