Question

我是网络开发的新手，正在创建一个网站组合。我的网站是www.laurenschaller.com。一切都按照我想要的方式工作，除了有时候（并非总是，如果我刷新它恢复正常）当我用chrome打开它时，包含文本“我是谁”的两个波浪重叠该文本，就像这http://imgur.com/Zxt7bEE

这是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

我会删除＆＃34; wave＆＃34; divs，然后离开标题，像这样：

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

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

Learning To Use The :before And :after Pseudo-Elements In CSS

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

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

<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而且它没有做任何事情。

Div仅在chrome中重叠h1

1 个答案: