Question

使用引导程序，我尝试在另一个图像上放置一个图像

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>

css：

.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”不要改变大小，因为你没有给它一个尺寸摆在首位。如果您的图片是500x500px（可以说），那么它将在您的网页上显示出来。我想您想根据窗口大小调整图像大小，因此必须使用相对单位（％，vw，vh，...）在CSS中为其指定尺寸

Answer 2

您可以使用img class =“ img-fluid”代替img响应式。我将元素放入容器流体和容器中。使用Bootstrap框架。id为imgbg的div为空。 id为imgpos的div也分配了img-fluid使其在窗口调整大小时更改大小。这个对我有用！如果这样做有帮助，请标记我的回答正确。

.imgbg
    {
 background: url("img/tile.png");
 background-repeat: repeat-x;
 position:absolute;
 width:2000px;// size of the div width
 height:1000px;// size of the div height
 z-index: 3;
 }


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

 }




 <div class="container-fluid">
 <div class="container">
 <section>
      <div class="row">
        <div class="imgbg"></div>
      <div><img class="img-fluid imgpos" src="img/cinema.jpeg"></div>
 </div>
 </section>

 </div>
 </div>

当您有两个图像（一个在另一个上）时如何使图像响应

2 个答案: