如何在图像上制作 div答案

【问题标题】：How to make the div over the image如何在图像上制作 div
【发布时间】：2016-02-08 18:34:08
【问题描述】：

 <div style="border-style:solid; margin:auto;">
   <div style="position:absolute;">
     <div style="background:yellow; border-style:dotted; height:300px; width:300px">
       <h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
     </div>
   </div>
   
   <img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
 </div>
 
 <div style="border-style:solid">
   <h2> THIS IS THE FOOTER</h1>
 </div>

我正在尝试在图像上放置一个div，如何让浮动div占据空间，因此页脚div会被相应地推送。

【问题讨论】：

标签： html css position absolute floating

【解决方案1】：

我不确定你在问什么。您是否希望黄色 div 仅占用其后面 div 的空间量（使用 Google Doodle）？还是要反过来，也就是要让footer高度自动调整为黄色的div高度？

【讨论】：

【解决方案2】：

我不确定我是否完全理解。您的意思是使包含图像的 div 具有最小高度吗？您可以使用 min-height 属性，如下所示：

 <div style="border-style:solid; margin:auto;min-height:80%">
   <div style="position:absolute;">
 <div style="background:yellow; border-style:dotted; height:300px; width:300px">
   <h3>THIS IS THE BODY, AND HEIGHT WILL BE CHANGED DYNAMICALLY</h1>
 </div>
   </div>

   <img src="https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg">
 </div>

 <div style="border-style:solid">
   <h2> THIS IS THE FOOTER</h1>
 </div>

-- 编辑：如果您在 div 容器中寻找某种背景图像，您可以控制您可以执行以下操作：

<html>
<head>
</head>
<body>
    <div style="border-style:solid; margin:auto">
       <div div style="background-image:url('https://www.google.ca/logos/doodles/2016/lunar-new-year-2016-5134827118395392-hp.jpg'); background-repeat: no-repeat;" >
             <div style="border-style:dotted; height:400px; width:600px">

             </div>
       </div>
     </div>

     <div style="border-style:solid">
       <h2> THIS IS THE FOOTER</h1>
     </div>
 </body>
 </html>

【讨论】：

谢谢回复，第一个div有img的高度，但是我想让第一个div有黄色div的高度，所以footer可以被黄色div而不是图片。
我认为对您有帮助的是 div 的背景图像，如下所述：w3schools.com/css/css_background.asp。您应该测试 w3schools 的示例，如果您是 css 初学者，它们真的很有帮助。我用一个例子编辑了答案。下次你应该提供一些草图，这样我们就能更好地理解你想要做什么:-)
非常感谢，下次我会尝试更好地解释这个问题。再次感谢您的回答。