用另一個div完全重疊img

Question

我試圖實現這種效果，當用戶將鼠標放在照片上時，照片獲得覆蓋整個照片的重複圖案。

問題：我似乎無法使覆蓋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>​ 

Answer 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，並且沒有設置左/上/右/右屬性，則該元素將不會像絕對(see this question)那樣工作。

Answer 2

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

???

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

Answer 3

z索引：-1圖像或z指數：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; 
}​ 

Answer 4

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