Question

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

代码：

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标记设定的默认img引起的，inline-block标记为block，将其更改为img { display:block; width: 100%; }

{{1}}

请参阅：http://jsfiddle.net/964FS/15/

将两个居中的图像一个放在另一个上面时出现空白问题

1 个答案: