我正在尝试使用 css 在我的图像上覆盖一个轮廓,但轮廓没有显示出来。如果我用背景颜色替换轮廓,它可以正常工作,但它没有达到我想要的框架效果。我也尝试过使用边框,但这增加了 div 的大小,所以它也不起作用。我需要覆盖 div 的高度和宽度为 100%,因为图像大小是动态的。
<figure class="visual-thumbnail" style="overflow:hidden;position:relative;">
<div class="img-info"></div>
<a href="http://innovationinhr.com/apploi/?p=351" class="thumbnail">
<img width="326" height="434" src="http://innovationinhr.com/apploi/wp-content/uploads/2013/07/unknown-326x434.jpeg" class="attachment-visual-thumbnail wp-post-image" alt="Sharif">
</a>
</figure>
figure{ display:block;overflow: hidden;
position: relative;width:326px;height:435px;}
.img-info {
outline: solid black 25px;
background-color: black;
left: 0;
top: 0;
opacity: 0;
position: absolute;
filter: alpha(opacity = 0);
width: 100%;
z-index: 1000;
height: 100%;
}
.visual-thumbnail:hover .img-info{
opacity:.5;
}
大纲不显示的任何原因?