Question

我正在创建一个网站标题，它是一个梯形形状的图像，网站标题位于其顶部。它看起来像我想要的方式，直到我在主体部分下面插入文本内容。当我这样做时，标题向下移动，不再在图像中居。

我创建了一个CodePen笔来显示我的意思，而不是使用图像，我只是给出了标题尺寸和颜色： width: 100%; height: 500px; background-color: red;

我尝试使用浮点数，我将标题包含在自己的部分中，但我无法弄清楚发生了什么。

这是CodePen的链接：CodePen

有人可以帮忙吗？谢谢。

Answer 1

只需提供 .header position:relative即可。

.header {
  width: 100%;
  height: 500px;
  background-color: red;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 100%);
    background-repeat: no-repeat;
    background-size: cover;

  position:relative;
}

Here是更新的代码集。

插入正文时会重新定位网站标题

1 个答案: