0

ブラウザが更新されるたびに、次を使用して 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}
4

1 に答える 1