2014-01-18 65 views
0

我想隱藏兩個圖像(部分)在我的中心/主div後面,就像它包含在圖片中一樣[圖像是藍色,中心div是棕色,深藍色是應該隱藏在div後面的圖像的一部分]。這兩幅圖像包含在HTML中(作爲標籤)。它們必須(作爲它們當前的)成爲HTML的一部分而不是通過CSS「注入」。 圖像的定位不是一個問題,但「重疊/隱藏」是。我已經嘗試了很多次,通過z-index但無濟於事。將圖像隱藏在div後面[z-index]

任何人都可以幫忙嗎?

鏈接到圖片。 http://i.stack.imgur.com/ZCKdt.jpg

+0

實際的問題是什麼?是否z-index不會改變元素的順序?如果是這樣,你需要在CSS中爲它們添加一個position屬性,如:'position:relative;'。 – Omega

回答

0

如果沒有看到您的HTML/CSS,診斷問題會更困難,但聽起來像是您將身體元素與定位元素混淆。 Z-index不適用於body元素,因此您應該嘗試將藍色圖像放入div並將該div放在棕色div之後。

你可以找到更多的信息,並在此舊後一個的jsfiddle例如:Hiding a image under the div

+0

謝謝,我試過了,它工作:) – Aca85

0

如果你正在尋找部分隱藏它們的主要格的背後,你可以設置父容器(你的身體標記,如果沒有別的包含主要的div),並使用background-image: url(image1.png), url(image2.png);然後background-position: left center, right center;在css中添加圖像。您也可以使用像素或百分比分別確定水平和垂直的位置。這樣,你就不必爲z-index而煩惱。

但是,無論是這樣,還是z-index都不能解決您的圖像部分可見的其他問題。爲此,您可以使用background: rgba(0, 0, 0, 0);來設置主div的背景顏色和不透明度,前三個零可以是0到255之間的任何數字,代表紅色,綠色和藍色,第四個零代表0到1(小數點),它確定不透明度。數字越小,背景越透明。它越透明,越能看到背後的圖像。

或者,您可以使用opacity: 0;以上述方式