Question

我有一个随机选择新背景图片的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>

我想知道如何调整图片大小。另外，我想知道如何使图像不固定在页面上，而是正常滚动页面。

Answer 1

据我所知，您无法使用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>

如果您想了解更多详情，请告诉我......

Answer 2

您可以尝试在CSS3中使用媒体查询或使用jQuery进行一些编码。 https://developer.mozilla.org/en-US/docs/CSS/Media_queries

希望这可以帮到你

更改Javascript背景图片的大小

2 个答案: