Question

我正在尝试实现此效果，当用户将鼠标放在照片上时，照片会在整张照片上覆盖重复图案。

问题：我似乎无法使叠加div完全覆盖照片。该怎么做？

编辑：更新了小提琴

CSS

#container {
    position: relative;
    padding: 10px;
    width: 1000px;
    height: 500px;
    background: blue;
}

.photo_box {
    padding: 8px 10px 11px 10px;
    background: #fff;
    -webkit-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    1px 1px 6px rgba(50, 50, 50, 0.25);
    box-shadow:         1px 1px 6px rgba(50, 50, 50, 0.25);
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: inline-block;
    position: relative;
}

.photo {
    position: absolute;
    z-index: 0;
    margin-bottom: 13px;
    border-radius: 5px; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.photo_tint {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background: red;
    -moz-opacity: 0.70;
    opacity: 0.70;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
}

HTML

<div id="container">
    <div class="photo_box">
        <img src='http://www.kurzweilai.net/images/Google-logo.jpg' class="photo">
            <div class="photo_tint"></div>
        </img>
    </div>
</div>

Answer 1

.photo_tint {
    position: absolute;
    z-index: 100;
    background: red;
    top:0; left:0;
    width:100%; height:100%;
}

???

http://jsfiddle.net/tFbbM/1/

Answer 2

除了将left和top属性添加到.photo_tint之外，您还需要使.photo_box相对定位（在编辑问题之前不是这样）。

.photo_box {
    position: relative;
}

.photo_tint {
    left:0;
    right:0;
}

http://jsfiddle.net/KDyKH/5/

绝对位置的left / top / right / bottom属性用于层次结构中较高位置的最后一个元素，其位置设置为relative或absolute。如果没有父元素将位置设置为relative / absolute，则使用正文。在您的情况下，最接近的相对定位元素为#container，因此在left上设置top和.photo_tint时，它使用了#container的来源，而不是.photo_box为了达到预期的效果，需要{1}}。

此外，如果元素设置为position：absolute，并且未设置left / top / right / right属性，则该元素将不会表现为绝对(see this question)。

Answer 3

z-index：-1上的图像或z-index：2上的div

#container {
    position: relative;
    width: 500px;
    height: 500px;
    background: blue;
}

.photo {
    position: relative;
    width: 300px;
    height: 100px;
    background: green;
}

.photo_tint {
    position: absolute;
    z-index: 1;
    background: red;
    width: 300px;
    height: 100px;
    top:0px;
}

Answer 4

只需使用photo_tint和top定位left div。 http://jsfiddle.net/OhMrBigshot/gEdJu/

用另一个div完全重叠img

4 个答案: