使div內的圖像出現在其div背景後面

我有一個div，其背景部分透明且帶有水印。在div的內部，我打電話給一個圖像，但我希望該圖像出現在div背景後面，這樣我可以在圖像上顯示帶水印的透明div背景。那可能嗎？下面是我有一個的CSS是不工作...使div內的圖像出現在其div背景後面

.artist-container { 
background:url(images/artist-back.png); 
    width:310px; 
    height:376px; 
    margin-left:-9px; 
    z-index:331; 
    position:relative; 
} 
.artist-container img { 
    width:300px; 
    height:300px; 
    margin-left:5px; 
    z-index:330; 
    position:relative; 
}

來源

2012-02-03 Pollux Khafra

+11

所以，你要爲你的背景的背景，這樣你就可以後臺，而你backgrounding？ Yo dawg ... – 2012-02-03 18:02:00

你可以使用PHP在飛行中應用水印： [http://stackoverflow.com/questions/4426207/php-how-to-add-text-watermark-on-an圖像] [1] [1]：http：// stackoverflow。com/questions/4426207/php-how-to-add-text-watermark-on-a-image – 2012-02-03 18:04:12

你真的不應該這樣做。除非水印是*圖像的一部分*，否則圖像不*真正*水印。如果沒有合併，任何人都可以輕鬆地將圖像保存在水印後面並獲得原始圖像。 – animuson 2012-02-03 18:09:08

通過給.artist-container較高z-index的，你把它放在更高的堆疊順序比個子圖像，儘管兒童的Z指數總是高於父母。

如果你想給水印的效果，您可以：

使圖像的div的背景，並放置圖像水印裏面。
絕對定位.artist-container範圍內的另一個div，尺寸與圖像相同，並且圖像的z-index更高，水印作爲背景。

來源

2012-02-03 18:05:08

這消除了圖像的語義含義，因爲它總是一個水印圖像（例如，在打印時不會顯示背景圖像）。 – animuson 2012-02-03 18:10:37

使圖像作爲div的背景圖像和水印作爲IMG

來源

2012-02-03 17:59:37

這消除了圖像的語義含義，因爲它總是一個水印圖像（例如，打印時不顯示背景圖像）。 – animuson 2012-02-03 18:10:03

謝謝你們。我得到了它的工作。 – 2012-02-03 18:35:01

是的...但是你不能在它裏面的任何東西的前面有一個div的背景圖像。你幾乎需要在該div前面有另一個div，並將背景圖像作爲水印 – 2012-02-03 18:35:43

它不可能把一個背景圖像的圖像正面在那個元素中。你可以簡單地使用主圖像作爲背景，或：

你可以做

<div class="holder"> 
    <img src=".." class="main_image"> 
    <img src=".." class="watermark"> 
</div> 

.holder { 
    width:100px; 
    height:100px; 
    position:relative; 
    display:block; 
} 

.main_image { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:0; 
} 
.watermark { 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:9; 
}

來源

2012-02-03 18:02:57 driedoezoe

背景不是一個水印，因爲它是透明背景，具有我想要的圖像效果。該圖像是用PHP調用併發生變化，所以我不能將原始div設置爲圖像背景。我唯一的猜測就是把div放在圖像下面，然後給它一個負的上邊距來重疊它。這是唯一的選擇嗎？ – 2012-02-03 18:12:39

可以使用負z-index，但在這種情況下，你必須有包裝不要有任何z-index。這是堆疊環境的特點之一。

這裏是一個演示小提琴：http://dabblet.com/gist/1731538

而且代碼，你會是這樣的：

.artist-container { 
    background:url(images/artist-back.png); 
    width:310px; 
    height:376px; 
    margin-left:-9px; 
    position:relative; 
} 
.artist-container img { 
    width:300px; 
    height:300px; 
    margin-left:5px; 
    z-index:-1; 
    position:relative; 
}

來源

2012-02-03 18:23:42 kizu

我颳起了使用一些跨一個小樣本，這不會增加任何語義內容添加到您的文檔中，並且仍然保持圖像的語義含義。

HTML：

<span class="cover_contain"> 
    <img src="http://i.imgur.com/hla4q.jpg" alt="[image]" width="128" height="128" /> 
    <span class="cover_image"></span> 
</span>

CSS：

span.cover_contain { 
    display: inline-block; 
    position: relative; 
} 
span.cover_image { 
    display: block; 
    background: url('http://i.imgur.com/5BtFV.png') center center no-repeat; 
    width: 128px; 
    height: 128px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

來源

2012-02-03 18:25:20 animuson

使div內的圖像出現在其div背景後面

回答

相關問題