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）

回答

相关问题