Question

假设我有一个小透明gif，我想对齐并缩放可以随着浏览器更改大小而缩放的图像。你可能已经猜到了，我希望在照片上有一个无缝的小动画，这样照片的一小部分似乎是动画的。

对于纯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中，但它很难处理整个浏览器。

Answer 1

我有点不清楚你想要的最终行为，但是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;
}

CSS：让孩子（img）在背景上正确对齐（图像）

1 个答案: