Question

我目前正在重新设计我的博客，并希望在博客顶部的每个图像的底部都有一个面板。我搜索过互联网，找不到我想要的东西。

这就是目前顶部的图像

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

在图像的底部，我一直试图在CSS中获得一个面板，看起来好像它正在图像背后缠绕，就像一个3d效果弹出，然后能够添加文本。

任何想法？

Answer 1

只需将图片和面板放在包装器div中，将position:relative放在包装器上，这样绝对定位的文本就会相对于包装器放置。 position:absolute上的z-index和panel，以便您可以将其放置在您想要的位置，并使其在z-index顺序中更高。最后在z-index panel

的价值较小的图片上加z-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;
}

如何在CSS中的图像上添加文本面板

1 个答案: