html - CSS布局问题

Question

在我的 CSS 布局中，我为 div 提供了尺寸和背景颜色，我想在其上粘贴图像，但由于某些原因，在这样做之后 div 框正在折叠。

HTML

<div class="box"></div>

CSS

body {
    background-color: #534;
}

div {
    display: block;
    max-width: 1000px; 
    height: 500px;
    margin: 20px auto;
    background-color: #fff;
} 
.box { 
    background: url('img/mike.png') no-repeat center; 
}

Answer 1

background 也会覆盖 background-color。使用 background-image 代替。使用这个:

.box { 
    background-image: url('img/mike.png'); 
    background-repeat: no-repeat;
    background-position: center;
}

jsFiddle