Question

我变得绝望了......我尝试建立一个旋转背景图像的网站，它会自动调整到窗口的大小。我并没有那么多的html，css，javascript等，但我设法到目前为止，图片旋转并调整到窗口大小..但是当我缩小窗口真的很小，图片旋转出来窗户..我希望你明白我的意思。

这是我的代码：

Fiddle

HTML

<div id="bgcon">
    <div id="bgimg">
    </div>
</div>

CSS

html, body {
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}
#bgcon {
    width:100%;
    height:100%;
    overflow:hidden;
}
#bgimg {
    content:"";
    position: fixed;
    width: 250%;
    height: 250%;
    top: -80%;
    left: -80%;
    z-index: -1;
    overflow:hidden;
    background-image: url("http://sidekickwallpapers.com/wp-content/uploads/2014/03/space-wallpapers-1920x1080-design-ideas-space-wallpapers-s3vgbbit.jpg");
    -webkit-animation:spin 150s linear infinite;
    -moz-animation:spin 150s linear infinite;
    animation:spin 150s linear infinite;
}
}
@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}
}

这就是问题：
Glitch

我不确定是否可以仅用css创建它，但就像我说的那样，我真的不太喜欢它。

感谢您的帮助！

Answer 1

你应该设置宽度＆amp; bgcon的高度与窗口宽度和高度的最大值的较高比例，保持平方：

var bg = document.getElementById("bgimg");

window.onresize = function() { 
    /* Compare values and set width/height based on higher value */ 
    var max = Math.max(window.innerWidth, window.innerHeight);
    bg.style.width = 2.5*max + "px";
    bg.style.height = 2.5*max + "px";
    bg.style.marginTop = -1.25*max + "px"; // Half of width/height
    bg.style.marginLeft = -1.25*max + "px"; // Half of width/height
}
window.onresize(); // Run on load

HTML：

<div id="bgimg"></div>

和CSS：

#bgimg {
    position:fixed;
    /* Center element on page */
    top:50%; left:50%;
    /* You have to center the image using center center */
    background: url("http://sidekickwallpapers.com/wp-content/uploads/2014/03/space-wallpapers-1920x1080-design-ideas-space-wallpapers-s3vgbbit.jpg") center center no-repeat;
    animation:spin 150s linear infinite;
    transform-origin:center center; /* Makes it rotate about the center */
    /* Others */
}

Demo

上述演示在大型浏览器中不完美的原因是因为图像太小。为了抵消你可以删除图像上的no-repeat，它将重复自己直到它占据的空间。或者你可以使用更大的图像。 Here is a demo有一个更大，不同的图像，显示它正常工作

Answer 2

我为个人项目做了这个小家伙。只需将图像URL放在数组中，然后更改选择器以填充背景图像。您可能还需要一些额外的CSS来覆盖图像的背景。

$(document).ready(function(){
    var images = ['imageURL', 'imageUrl'],
        i = 0,
        timeoutVar;

    function changeBackground() {
        clearTimeout(timeoutVar); // just to be sure it will run only once at a time

        $('.YourSelector').css('background-image', function() {
            if (i >= images.length) {
                i=0;
            }
            return 'url(' + images[i++] + ')';      
        });

        // call the setTimeout every time to repeat the function
        timeoutVar = setTimeout(changeBackground, 3000);
    }

    // Call it
    setTimeout(changeBackground() , 5000);

});

编辑：

使用一些CSS，您可以使背景图像“覆盖”背景。

html { 
  background: url() no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

取自： http://css-tricks.com/perfect-full-page-background-image/

工作FIDDLE： http://jsfiddle.net/df9A2/

希望这有帮助！

旋转的背景图片

2 个答案: