CSS：讓一個孩子（img）在背景上正確對齊（img）

假設我有一個小的透明gif，我想對齊和縮放一個可以隨瀏覽器更改大小而縮放的圖像。你可能猜到了，是的，我希望在照片上有一個無縫的小動畫，這樣照片的一小部分似乎是動畫的。CSS：讓一個孩子（img）在背景上正確對齊（img）

這對純CSS來說太難了嗎？我已經開始在js中做這件事，看起來似乎很複雜的CSS。所以，當我繼續前進並通過代碼實現時，任何人都有偶然的時髦CSS方法？

嘗試了這樣的事情，但由於某種原因，浮動圖像與瀏覽器（可見）百分比縮放，而不是包含bg圖像的父div。

<div id="bg-image"> 
     <div class="bg-container"> 
      <img class="photo" src="../images/bg_artist.jpg" alt=""/> 
      <img class="floater" src="../images/twitter.png" alt="" /> 
     </div> 
    </div>

只是假裝我希望孩子像在右下角顯示：

#bg-image .container 
{ 
    width:102%; 
    margin-left:-10px; 
} 


#bg-image .photo 
{ 
    width:102%; 
    margin-left:-10px; 
} 

#bg-image .floater { 
    position:fixed; 
    left:90%; 
    top:90%; 
}

好，把玩了有關情況後，JS的解決方案很簡單：

var floater = document.getElementById("floater"); 
var photo = document.getElementById("bg-photo"); 

floater.style.left = photo.width * .9 +"px"; 
floater.style.top = photo.height * .5 + "px";

對不起，我把它放在jsfiddle中，但它很難處理整個瀏覽器。

來源

2012-04-18 FlavorScape

你能[顯示你有什麼，不工作（http://jsfiddle.net/）？ – 2012-04-18 23:16:31

是不是父瀏覽器縮放比例？然後漂浮物與容器一起縮放。如果我理解你的話，任何演示都將不勝感激;） – 2012-04-18 23:16:34

好吧，試着拿起小提琴 – FlavorScape 2012-04-18 23:21:40

我有點不清楚你想要的最終行爲是什麼，但this has the images scaling and staying located in relation to each other。

HTML

<div id="bg-image"> 
    <img class="photo" src="path/bkgimage.png" alt=""/> 
    <img class="floater" src="path/floatimage.png" alt="" /> 
</div>

CSS

#bg-image { 
    position: absolute; 
    width:100%; 
    left: 0; 
    top: 0; 
} 


#bg-image .photo { 
    width:100%; 
} 

#bg-image .floater { 
    position:absolute; 
    width: 10%; 
    height: 10%; 
    bottom: 0; 
    right: 0; 
}

來源

2012-04-19 01:01:14 ScottS

。它在測試用例中可以正常工作，但我有其他元素或css干擾。無法在應用程序中將其隔離，但我將標記爲已答覆。在我的情況下，身體溢出設置爲隱藏，但我在我的測試案例中嘗試過，它仍然有效... – FlavorScape 2012-04-20 23:24:21

CSS：讓一個孩子（img）在背景上正確對齊（img）

回答

相關問題