html - 将两个居中图像放置在另一个之上时的空白问题

Question

我正在尝试将一个图像定位在另一个图像的顶部，但顶部的图像并不完全位于顶部/底部的中心，并且另一张图像的高度不同，所以当我使用相同的代码两次出现图像之间的空白。

这是JSFiddle

和代码：

HTML

<div class="container">
    <a href="" class="link">
        <span><img src="" class="topImage"></span>
        <img src=""/>   
    </a>
</div>

<div class="container">
    <a href="" class="link">
        <span><img src="" class="topImage"></span>
        <img src=""/>   
    </a>
</div>

CSS

.container {
   position: relative;
   width: 100%;
} 

 .container a span {
   display: none;
   width: 100%;
   height: 100%;
   margin: 0;
   background-color: rgba(34, 34, 34, 0.4);
   opacity: .95;
 }

.container a:hover span {
    position: absolute;
    display: block;
    vertical-align: top;
    margin: 0;
    left: 0;
  }

 .topImage {
    width: 25%;
    position: absolute;
    top: 0; bottom:0; left: 0; right:0;
    margin: auto;
   }

  img {
      width: 100%;
  } 

我想将图像居中放在顶部并删除背景图像之间的空白。

谢谢。

Answer 1

图像之间的空白是由于为标签display设置的默认值，即，将其更改为imginline-blockblock

  img {
      display:block;
      width: 100%;
  } 

见：http: //jsfiddle.net/964FS/15/