0

每次刷新浏览器时，我都使用以下内容加载随机背景图像。在顶部，我使用了 2 个淡入的 z 层，一个从黑色到透明，另一个是从透明到纯色的覆盖图案。在 Chrome 和 Safari 上运行良好，但 Firefox 拒绝淡出第 1 层（黑色到透明），并且 Firefox 拒绝拉伸图像以覆盖背景。

<script type="text/javascript"> 
var totalCount = 6;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'images/'+num+'.jpg';
document.body.style.backgroundSize = "cover";
document.body.style.backgroundPosition = "center";
}
</script>

</head>
<body style="background-color:#000">
 <a style="display:block; position:fixed; left:0; top:0; width:100%; height:100%; cursor:pointer" href="#/">
<div class="overlay fade-out one">
</div>
<div class="overlaygrid">
</div>
</a>
</body>
<script type="text/javascript"> 
ChangeIt();
</script> 
</html>

和 CSS

.fade-out {
opacity:1; 
-webkit-animation:fadeIn ease-in 0;
-moz-animation:fadeIn ease-in 0;
animation:fadeIn ease-in 0;

-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;

}

.fade-out.one {
-webkit-animation-delay: 0.0s;
-moz-animation-delay: 0.0s;
animation-delay: 0.0s;
}



.overlay {display:block;position:fixed;left:0;top:0;width:100%;height:100%; background:#000; z-index:1 }

.overlaygrid {display:block;position:fixed;left:0;top:0;width:100%;height:100%; background: url('../assets/bg-overlay-pattern.png'); z-index:2}
4

1 回答 1

1

您需要确保添加以下 CSS：

html {
    height: 100%;
}
body {
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
}

注意：如果 body 还没有背景，您可以通过 CSS 设置背景大小，而无需通过 JavaScript 重置它。将 JS 操作保持在最低限度。任何样式属性也是如此（当然除了你的图像......除非你想要一个默认图像）。

于 2013-09-03T17:42:14.550 回答