javascript - 如何使用 CSS3 和 Jquery 混合图像并按中心对齐它们？

Question

我有两个图像列表。第一个列表中的每个图像在第二个列表中都有一对。所有图像具有相同的大小。像这样:

我的任务是混合每对图像并按中心对齐它们。每个图像都是透明的 png，所以它应该投下复杂的阴影。

问题是，我不完全明白该怎么做。 现在我是这样做的:

  .center
  {
    width: 1280px;
    height: 410px;
    margin: auto;
  }
  .building-img
  {
    width: 600px;
    #background-color: #F8F8FF;
    #box-shadow: 0 0 5px rgba(0,0,0,0.5);
    z-index: 1;
    position: relative;
    left: 300px;
    margin-top: 10px;
  }
  .route-img
  {
    width: 600px;
    z-index: 2;
    position: relative;
    right: 304px;
    margin-top: 10px;
  }  
  .filter-drop-shadow {
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
    }


<div class="center">
            <img class="building-img filter-drop-shadow" src="img1.png" />
            <img class="route-img filter-drop-shadow" src="img2.png" />
</div>

虽然它看起来应该运行良好，但实际上并非如此。因为我使用了 position 属性，所以图像会根据需要混合，但它们有一个隐藏区域，这不允许我在不丢失中心对齐的情况下缩放网页。 那么，有什么办法可以按我的需要去做吗？混合图像、投影并按中心对齐它们。

Answer 1

最简单的方法是通过绝对定位。

HTML:

<img src="http://i.stack.imgur.com/4aDqe.png" id="img1">
<img src="http://i.stack.imgur.com/SEdhL.png" id="img2">

CSS:

#img1 , #img2 {
    position: absolute;
    width: 500px;
    height: 400px;
}