主页 / 问题 / 607739
Accepted
Bernard
Asked:2020-12-26 00:42:40 +0000 UTC2020-12-26 00:42:40 +0000 UTC

如何将图像放在块上？

  • 772

我有一个块和一张图片。如何将一个叠加在另一个之上？

 #box {
     width: 100%;
     height: 150px;
     background-color: #15B575;
     }

    #logo {
     margin-top: 50px;
    }
  <header>
      <div id='box'></div>
      <img id='logo' scr='somefoto'>
    </header>

不知道怎么上传图片。

html

3 个回答

  1. Best Answer

    #box {
 width: 100%;
 height: 150px;
 background-color: #15B575;
 }

#logo {
 margin-top: 50px;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  z-index: 2;
}
header {
position: relative;
}
    <header>
  <div id='box'></div>
  <img id='logo' scr='somefoto'>
</header>

    • 5

  2. 尝试为 margin-top 属性使用负值，如下所示：

    #logo {
    display: block;
    margin-top: -50px;
}

    虽然，从块的名称来看，将徽标中的图像放在带有 id 框的容器中会更正确。

    • 4

  3. 最简单和最可维护的解决方案是将图像放入块中并将块设置position: relative;为图像position: absolute;。

    接下来，使用 CSS-properties left, right, top,bottom以您需要的单位从块的相应侧移动图像。

    #box {
  position: absolute;

  /* Просто для демонстрации */
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

#logo {
  position: relative;

  /* Просто для демонстрации */
  left: 30px;
  top: 20px;
  right: 40px;
}
    <div id="box">
  <img id="logo" src="http://lorempixel.com/output/nature-q-c-200-100-6.jpg" />
</div>

    • 4

相关问题