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

Question

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

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

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

Answer 1

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

您可以在here中进一步了解CSS中的position属性。

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