Question

如何在标题部分重叠两个图像？我希望其中一个图像是背景，另一个图像位于该图像的顶部，但floating left。你会如何定位？或者使用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中的其他图像（以及标题的内容，如果有的话）。例如：

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

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

1 个答案: