如何混合圖像並使用CSS3或JQuery使其居中？

我有兩個圖像列表。第一個列表中的每個圖像都有一對。所有圖像具有相同的大小。就像這樣：如何混合圖像並使用CSS3或JQuery使其居中？

enter image description here

我的任務是每一個融合對圖像和由中心對齊。每個圖像都是透明的png，所以它應該放下一個複雜的陰影。 enter image description here

問題是，我不完全明白如何去做。現在我做了這樣的說法：

.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屬性，圖像根據需要進行了混合，但它們有一個隱藏區域，不會讓我縮放網頁而不會丟失中心對齊。那麼，有什麼辦法可以根據需要做到嗎？混合圖像，投影並按中心對齊它們。

來源

2014-11-02 Ilya Glushchenko

如果覆蓋，每兩個圖像都會有它自己的陰影。對於「組合」圖像，您不會得到一個陰影 - 至少，不會使用CSS陰影。 – 2014-11-02 02:06:24

最簡單的方法是通過絕對位置。

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; 
}

來源

2014-11-02 01:57:18 Duniyadnd

我想過了。但是，我應該如何按照中心對齊它們？如果我有多個這樣的對，那麼他們應該一個接一個。 – 2014-11-02 01:58:33

如果你把你的位置：絕對的位置：相對的div，並將其與頁面中間對齊，它符合父div所在的位置。 – Duniyadnd 2014-11-02 01:59:21

如何混合圖像並使用CSS3或JQuery使其居中？

回答

相關問題