html - 位于网站两个部分之间的图片

Question

我正在尝试通过创建一个我发现的简单网站来学习 html css，我想让图片位于 2 个部分之间。

就像这张图片一样，图片位于两个部分之间

我想知道这种设计是什么？

Answer 1

一个简单的方法是将树的位置设置为“相对”。

您可以阅读更多here关于 CSS 中的位置属性。

为了在这里定义 2 个部分，我使用了 div tag :

#div1 {
  background-color: red;
  width: 800px;
  height: 200px;
  display: block;
}

#div2 {
  background-color: yellow;
  width: 800px;
  height: 200px;
  display: block;
}

#myImg {
  height : 200px;
  position: relative;
  top: -50%;
}

<div id="div1">

</div>

<div id="div2">

 <img id="myImg" src="https://banner2.kisspng.com/20180206/age/kisspng-tree-magnolia-christmas-nature-transparent-background-5a7a720d01efd2.8244164415179740290079.jpg" alt="" />
</div>