html - 背景从div溢出

Question

我正在设计一个具有以下 HTML 结构的页面。

<div id="event">
    <div id="event-image">
        <div id="event-image-background">               
        </div>
        <img src="image_url_here">
    </div>
     <div id="event-title">
            EVENT 1
     </div>
    <div id="event-details-summary">
       Event Summary Here
    </div>
    <div id="event-description">
    </div>
</div>

我正在使用以下 CSS 作为结构。

#event{
position: relative;
}
#event-image{
text-align: center;
margin: 0px auto;
border: 1px solid #fff;
box-shadow: 0px 5px 10px -7px #CCC, -5px 10px 10px -7px #CCC;
overflow: hidden;
}
#event-image-background{
 background: url('image_url_here') no-repeat;
background-size: cover;
opacity: 0.1;
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
}
#event-image img{
opacity: 1;
z-index: 3;
border: 1px solid rgba(204, 204, 204, 0);
}

我面临的问题是我应用到事件图像背景的背景溢出到其他 div，即事件标题和后面的其他内容。我不太擅长 CSS，也不知道出了什么问题。请帮忙。

谢谢 :)

PS:我真的不想使用 max-height 选项，因为我将通过 img src 添加的图像对于每个事件都有可变的高度。

Answer 1

尝试添加 overflow: hidden;至 #event-image-background .

Protip，我建议优先使用类样式(例如 .event-image-background 和 <div class="event-image-background">)而不是 ID。请参阅:http://css-tricks.com/the-difference-between-id-and-class/ .