0

小さな透明な 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 に入れたいのですが、ブラウザ全体を扱うので難しいです。

4

1 に答える 1

0

最終的な動作をどうしたいかは少しわかりませんが、これにより、画像がスケーリングされ、互いに関連して配置されたままになります。

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-19T01:01:14.170 に答える