我有一个HTML和CSS代码来显示2张图片。我正在使用引导程序使它们响应,但只有背景响应。有人可以告诉我为什么以及如何解决吗?

html代码:

<img id="introducaoBackground" class="img-fluid" src="Imagens/introducaoBackground.png" alt="Background da introdução"></img>
<img id="logo" class="img-fluid" src="Imagens/logo.png" alt="Logo"></img>




#introducaoBackground {
position: absolute;
top: 0px;
left: 0px;
}




#logo {
position: absolute;
top: 73px;
left: 280px;
}

最佳答案

那不是相对容器中的绝对徽标吗?

<img id="introducaoBackground" class="img-fluid" src="Imagens/introducaoBackground.png" alt="Background da introdução"></img>

<div id="relativeDiv">
  <img id="logo" class="img-fluid" src="Imagens/logo.png alt="Logo"></img>
</div>


我已经为relativeDiv id重新使用了背景属性,但是您当然可以在相对位置旁边创建其他属性。

#introducaoBackground {
position: relative;
top: 0px;
left: 0px;
}

#logo {
position: absolute;
top: 73px;
left: 280px;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

#relativeDiv {
position: relative;
top: 0px;
left: 0px;
}


另一个例子:
https://codepen.io/staypuftman/pen/tFhkz

关于html - 如何同时制作2张图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58467600/

10-09 17:35