如何通过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中的图像添加文本面板

回答

相关问题