Question

我有一个带有标题和内容部分的网页。我将标头样式设置为渐变并为梯形形状。我想让一个图像（leaf.png）漂浮在这两个div的中间。但是，由于某些原因，我的标题会覆盖图像。这是我想要拥有的照片： link 但这是发生了什么： link 我不知道发生了什么或如何解决。我希望最终结果看起来像stripe.com.的标题，这是我的代码：

<!doctype html>
<html>
<head>
<title>Document</title>
<style>
header {
  position: relative;
  height: 300px;
  overflow: hidden;
}
.header__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(blue, black);
  transform: skewY(-6deg);
  transform-origin: top left;
}

h1 {
  margin: 0;
  padding: 100px 0;
  font: 44px "Arial";
}

header h1 {
  position: relative;
  color: white;
}
</style>
</head>
<body>
<header>
  <img src="leaf.png" style="float:right" />
  <div class="header__bg"></div>
<h1>Header Content</h1>
</header>
<section>

  <h1>Section Content</h1>
</section>
</div>
</body>
</html>

此外，这是叶子的图片：https://ibb.co/dFqdw9 请帮忙。谢谢。

Answer 1

您可以像这样更新内联样式：

<header>
  <div class="header__bg"></div>
  <div>
        <img src="leaf.png" style="right: 0; position: fixed; z-index: 2;" />
   </div>
<h1>Header Content</h1>
</header>

Answer 2

在代码中进行以下更改：

<!doctype html>
<html>
<head>
    <title>Document</title>
    <style>
        header {
            position: relative;
            height: 300px;
        }
        .header__bg {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(blue, black);
            transform: skewY(-6deg);
            transform-origin: top left;
        }
        h1 {
            margin: 0;
            padding: 100px 0;
            font: 44px "Arial";
        }
        img {
            position: relative;
            z-index: 2;
        }
        header h1 {
            position: absolute;
            color: white;
        }
    </style>
</head>
<body>
    <header>
        <img src="leaf.png" style="float:right"/>
        <div class="header__bg"></div>
        <h1>Header Content</h1>
    </header>
    <section>

        <h1>Section Content</h1>
    </section>
</body>
</html>

如何在标题和内容部分的中间浮动图像？

2 个答案: