ブラウザが更新されるたびに、次を使用して ramdom 背景画像をロードしています。その上で、フェードインする 2 つの z レイヤーを使用します。1 つは黒から透明に、もう 1 つは透明から無地にオーバーレイ パターンです。Chrome と Safari では正常に動作しますが、Firefox はレイヤー no1 (黒から透明) をフェードアウトすることを拒否し、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}