1

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

问题：我似乎无法让覆盖 div 完全覆盖照片。这应该怎么做？

JSfiddle：http: //jsfiddle.net/KDyKH/2/

编辑：更新了小提琴

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>​
4

4 回答 4

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

？？？

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

于 2012-06-23T22:34:29.360 回答
1

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

.photo_box {
    position: relative;
}

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

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

绝对位置的左/上/右/下属性处理层次结构中较高的最后一个元素，位置设置为相对或绝对。如果没有父元素的位置设置为相对/绝对，则使用主体。在您的情况下，最接近的相对定位元素是#container，因此当left和top被设置在它上时，.photo_tint它使用#container' 原点而不是.photo_box' 原点来实现所需的效果。

此外，如果一个元素设置为 position:absolute，并且没有设置 left/top/right/right 属性，则该元素将不会表现为绝对（请参阅此问题）。

于 2012-06-23T23:05:11.523 回答
0

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

#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;
}​
于 2012-06-23T22:37:07.373 回答
0

只需使用和定位photo_tintdiv 。http://jsfiddle.net/OhMrBigshot/gEdJu/topleft

于 2012-06-23T22:42:38.173 回答