html - 如何在标题部分重叠图像？

Question

如何在页眉部分重叠两张图片？我希望其中一张图片作为背景，另一张图片位于该图片之上，但向左浮动。 你会如何定位它？还是使用 CSS 更好？如何使用？ 请记住，我是网页设计的新手。谢谢你!

<div style="position:relative; left:0; top:0;">
    <h1>
     <img src="C:\Users\zacfre9292\Desktop\Favorite Music\JSC2.jpg" alt="Jesus Culture logo" width="1900" height="197">
    </h1> 

   <h1>
    <img src="C:\Users\zacfre9292\Desktop\Favorite Music\jesusculture logo.png" alt="Jesus Culture logo" width="700" height="200" >
   </h1>
</div>

Answer 1

使用带有图像的 div 作为背景，然后将其他图像(以及页眉的内容，如果有的话)放在 div 中。示例:

body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#headerbg {
  width: 100%;
  height: 150px;
  position: relative;
  background: url('http://i.imgur.com/3S4zuof.gif');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

<div id="headerbg" alt="image" style="text-align:center;">
<img src="http://i.imgur.com/Goy7oBy.gif" alt=logo style="max-height:150px">
</div>