css - 当你有两个图像(一个在另一个之上)时如何使图像响应

Question

使用 Bootstrap ，我尝试在另一个图像上放置一个图像

HTML :

<section id="test">
  <div class="row">
          <div class="imgbg"><img src="img/bg_pres.png" class="img-responsive"></div>
          <div class="imgpos"><img src="img/ico_presentation.png" class="img-responsive"></div>
</div>
</section>

样式:

.imgbg
        {
  margin-top: 5%;
  position:absolute;
  background-repeat :repeat-x;
  width:98%;
  height:auto;
  background-image: url('img/bg_pres.png');
  z-index : 3;
      }


.imgpos
{
position:relative;
  z-index: 5;

}

当我调整窗口大小时，图片“ico_presentation.png”不会改变并保持其原始大小。

有人可以解释一下我需要更改什么吗？

非常感谢

Answer 1

1) 注意缩进。

2) 你有一个 div (imgbg)，带有背景图像和 img 标签中的图像。

3) “ico_presentation.png”不要改变大小，因为你一开始就没有给它一个大小。如果您的图片(比方说)是 500x500 像素，它将在您的网页上显示为这样。我想你希望你的图像根据窗口大小调整大小，所以必须使用相对单位 (%, vw, vh, ...) 在 css 中给它尺寸