图片位于网站的2个部分之间

Question

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

就像在这张照片中，图片介于两个部分之间

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

Answer 1

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

你可以在CSS中阅读更多有关position属性的here。

要在这里定义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>