如何通過CSS中的圖像添加文本面板

我目前正在重新設計我的博客，並希望在每個圖像的底部都有一個面板位於博客頂部。我搜索了互聯網，無法找到我正在尋找的東西。如何通過CSS中的圖像添加文本面板

這就是頂部的圖像目前看起來像

http://i1078.photobucket.com/albums/w483/tobster619/Gaming%20Images/FeaturedImage_zpsf93acced.png

在我一直在試圖讓一個面板的圖像的底部，在CSS，這看起來就好像它的周圍包裹的背後該圖像就像彈出的3d效果一樣，然後能夠向其添加文本。

任何想法？

來源

2013-08-03 Toby Clench

你可以創建一個簡化[的jsfiddle]（HTTP ：//jsfiddle.net）？ – Adrift

這是我能做的最好的，因爲所有的代碼都在博主模板裏面 - http://jsfiddle.net/DxNpB/ –

只需將圖像和麪板放在包裝div中，將position:relative放在包裝上，以便絕對定位的文本相對於包裝放置。 position:absolute,z-index,panel，這樣你就可以將它放在你想要的位置，並使它在Z-index順序中更高。最後放z-index具有更低的值在圖像上，則panelz-index

HTML

<div class="textImgHover"> 
    <img src="someimage.jpg" /> 
    <div class="panel"> 
    <div class="panelitem">Panel Item 1</div> 
    <div class="panelitem">Panel Item 2</div> 
    <div class="panelitem">Panel Item 3</div> 
    </div> 
</div>

CSS

.textImgHover { 
    position:relative; 
} 

.textImgHover .panel { 
    position:absolute; 
    bottom:5px; 
    left:5px; 
    z-index:20; 
} 

.textImgHover .panelitem { 
    float:left; 
    margin-right:5px; 
    background:rgba(255,255,255,0.2); 
    color:#FFF; 
    padding:3px; 
} 

.textImgHover img { 
    position:relative; 
    z-index:10; 
}

來源

2013-08-03 16:01:14

如何通過CSS中的圖像添加文本面板

回答

相關問題