html - 背景图像顶部的图像

Question

显然我做的不对。我正在尝试将我的徽标放在我的标题上，即 .head。我该怎么做呢？当我按照下面提供的方式执行此操作时，我的图像会弹出在我的标题上方，而不是在它上面。

标记

<img src="\logo.png" width="96" height="82">
<div class="head"></div>

CSS

.head {background-image:url('header_bg.png'); top repeat-x; height: 110px;} 

body {padding:0; margin:0;}

Answer 1

将图像标签放在 div 内？

<div class="head">
    <img src="\logo.png" width="96" height="82">
</div>

仅水平居中imgdiv 内部的示例：

<div class="head">
    <img src="http://placekitten.com/200/100">
</div>

.head {
    width: 300px; height: 300px;
    background: transparent url(http://placekitten.com/300/300) no-repeat;    
}

.head img {
    display: block;
    margin: 0 auto;    
}

Answer 2

您只需将<img>标签放在标签内<div>，如下所示：

<div class="head"><img src="\logo.png" width="96" height="82"></div>