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

我面临的问题是我应用于event-image-background的背景溢出到其他div中，即事件标题和后面的其他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/。

从div溢出的背景

1 个答案: