-2

新しい背景画像をランダムに選択する Javascript があります。

<script  type="text/javascript">
    function changeImg(imgNumber)   {
        var myImages = ["images/001.jpg", "images/002.jpg", "images/003.jpg",      "images/004.jpg"]; 
        var imgShown = document.body.style.backgroundImage;
        var newImgNumber =Math.floor(Math.random()*myImages.length);
        document.body.style.backgroundImage =      'url('+myImages[newImgNumber]+')';
    }
    window.onload=changeImg;
    </script>

その画像のサイズを変更する方法を知りたいです。また、画像がページに固定されたままではなく、通常どおりページに沿ってスクロールする方法を知りたいです。

4

2 に答える 2

0

私の知る限り、CSS を使用して本文の背景画像のサイズを変更することはできません。ただし、以下に従って同じシナリオを実現できます。

<html>
    <head>
        <style type="text/css">
            .bgimage{
                position:absolute;
                top:0;
                left:0;
                z-index:-1;
                width:500px;
                height:200px;
            }
            .content{
                position:relative;
                z-index:1;
            }
            p{
                color:#fff;
            }
        </style>
    </head>
    <body>
        <img class="bgimage" src="http://www.hdwallpapersarena.com/wp-content/uploads/2012/07/Download-Hulk-HD-Wallpaper-For-Computer.jpg" />
        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum vestibulum elementum. Nunc cursus sem et odio porttitor bibendum. Nulla facilisi. Phasellus egestas sodales sapien, ut ullamcorper metus aliquam ac. Sed tellus ipsum, mattis nec vulputate non, ultrices vel mi. Etiam sodales porta nibh, dignissim porta eros viverra in. Nullam non augue lacus. Nullam et neque a arcu pellentesque mattis quis semper lectus. Ut a urna velit. Integer elementum, eros eu ullamcorper pretium, nisl est congue nibh, in aliquam risus massa nec lacus. Praesent blandit felis massa, ut suscipit lacus. Pellentesque sodales nulla at enim lobortis egestas ac ac urna. Pellentesque varius, erat ut mattis sodales, augue nisi luctus nibh, id ultrices lectus lectus feugiat mauris.
            </p>
        </div>
    </body>
</html>

詳細が必要な場合はお知らせください...

于 2013-02-21T04:49:22.610 に答える
0

CSS3 でメディア クエリを使用するか、jQuery を使用して少しコーディングしてみてください。 https://developer.mozilla.org/en-US/docs/CSS/Media_queries

これがあなたを助けることを願っています

于 2013-02-21T04:59:30.287 に答える