圖像上的CSS疊加

我想簡單地將這4個圖像疊加在一塊顏色上，並在每個圖像的中間對齊文本。但是目前我使用「position：absolute」來獲取每個圖像的正確位置和z-index等等。我發現很難嘗試這樣的操作：http://jsfiddle.net/jimjeffers/mG78d/1/並使其正常工作。我絕對的位置似乎總是會破壞我從stackoverflow和其他人嘗試的其他代碼，甚至嘗試了幾個jQuery腳本。圖像上的CSS疊加

直播網址：http://bit.ly/1k7RgDS

HTML

<div class="index-gallery"> 
      <img src="<?php HTTP_HOST ?>/Images/1.JPG" alt="" class="img1" /> 
      <img src="<?php HTTP_HOST ?>/Images/2.JPG" alt="" class="img2" /> 
      <!-- <img src="<?php //HTTP_HOST ?>/Images/3.JPG" alt="" class="img3" /> --> 
      <img src="<?php HTTP_HOST ?>/Images/6.JPG" alt="" class="img3" /> 
      <img src="<?php HTTP_HOST ?>/Images/5.JPG" alt="" class="img4" /> 
     </div>

CSS

#index-gallery .index-gallery { margin-bottom: 30px; } 
#index-gallery .index-gallery img:hover { opacity:0.6; filter:alpha(opacity=40); /* For IE8 and earlier */ } 
#index-gallery .index-gallery img:before { content: "Show Home Hemel Hempstead"; } 
#index-gallery .index-gallery .img1 { width: 550px; top: 10px; position: absolute; z-index: 3; display: block; } 
#index-gallery .index-gallery .img2 { width: 550px; right: 0; position: absolute; z-index: 2; display: block; } 
#index-gallery .index-gallery .img3 { width: 400px; top: 400px; left: 10px; position: absolute; z-index: 4; display: block; } 
#index-gallery .index-gallery .img4 { width: 710px; top: 400px; right: 0; position: absolute; z-index: 1; display: block; }

我有一個透明的代碼一點點工作，但更多的與那的jsfiddle什麼期待使用顏色疊加懸停時，可以將文本居中放置在中間。如果你有一個建議可以改變我不介意的所有代碼，如果這是不好的做法，我到目前爲止已經有了。

來源

2014-03-02 JordanC26

您必須將**每個**圖像包裹在一個具有'position：relative'的元素中，然後從那裏開始工作。說實話，像這樣定位每個圖像並不是最佳的佈局方法。 –

所以 - 使用你已有的東西，你可以試試這條路線。最小的位置變化，我在跨度內添加了段落標籤，因此您可以絕對定位文本。

http://jsfiddle.net/9H7eM/

<span><p>Hello</p></span> 

#overlay {position: relative;} 

#overlay span { 
    background: red; 
    bottom: 0; 
    display: block; 
    left: 0; 
    opacity: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 1; 
} 

#overlay span p { 
    position: absolute; 
    text-align: center; 
    width: 100px; 
    top: 30px; 
    font: bold 16px arial; 
}

，如果你開到改變你的代碼，你可以嘗試類似這樣的方法：http://jsfiddle.net/te6t8/1/

但如果你用它是多麼幸福已經，堅持你擁有和知道的東西！

來源

2014-03-02 16:38:33 Nick

是否可以只顯示懸停時的跨度文本以及顏色變化。 – JordanC26

當然 - 我已經更新了跨度樣式，因此它會影響所有跨度，並且我更新了樣式底部的P標籤和懸停狀態，因此只有在div已經懸停時纔會顯示。 ------ 將P包含在範圍內的主要問題是它會改變文本的不透明度以及背景.------ 這裏是新的小提琴 - ** http：//jsfiddle.net/te6t8/2/**------ - 那好嗎？ – Nick

進一步更新 - ** http：//jsfiddle.net/te6t8/3/** – Nick

圖像上的CSS疊加

回答

相關問題