时间戳

首页 > 解决方案 > 在html中的两个div之间设置图像

html - 在html中的两个div之间设置图像

问题描述

我有两个 divA和B. 现在我想为两个 div 设置一个图像，如下图所示。 在此处输入图像描述

HTML

<div class="navbar-slider">
   <div class="navbar"></div>
   <img src="image_src" alt="Test Image">
   <div class="slider"></div>
</div>

不明白会是什么css职位。

有人帮忙吗？提前致谢。

标签： htmlcss

解决方案

.navbar-slider {
    display: flex;
    flex-direction: column;
}

.navbar {
  width: 200px;
    height: 200px;
    border: 1px solid;
    position: absolute;
    transform: translate(25%, 0%);
    background-color: green;
}

img {
    width: 202px;
    position: absolute;
    transform: translate(25%, 50%);
    border-radius: 50%;
    z-index: 9999;
}

.slider {
    width: 200px;
    height: 200px;
    border: 1px solid;
    position: absolute;
    transform: translate(25%, 100%);
    background-color: yellow;
}
<div class="navbar-slider">
   <div class="navbar"></div>
   <img src="https://static3.depositphotos.com/1000992/133/i/450/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg" alt="Test Image">
   <div class="slider"></div>
</div>

推荐阅读