CSS rgba背景色不透明度の前にロード

Question

イメージ全体がビューポートを占めています。その上にdivもあり、ビューポート全体を占めています。 divの後ろの画像を暗く見せるためにdivにはbackground: rgba(0,0,0,.5);があります。ページが読み込まれているときに、不透明度が適用される前に画面全体がグレーで覆われていて、下の画像が見えるという点を除けば、素晴らしい作品です。

画像とdiv（不透明度が適用されている）を同時に表示する方法はありますか？私はページが読み込まれている間に大きな灰色のブロックを見たくありません。

Answer 1

これはあなたのためhttps://jsfiddle.net/c259LrpL/26/

それを行う必要があります。これは、イメージがロードされているまで、同じ時間にimgとdivが見えるようお待ちしております...私は

<img id="img1" src="http://lorempixel.com/1200/1200/sports/1/" style="visibility: hidden" > 
<div id="over" style="visibility: hidden" > 

</div> 
<script> 
    $(window).on("load", function() { 
    $("#img1").css("visibility", "visible"); 
    $("#over").css("visibility", "visible"); 
    }); 
</script> 

Answer 2

はこのアイデアを考えてみましょうと思います。 <img>コンテナの背景プロパティ（私の例では<figure>）の:after疑似クラスを使用して、暗くすることを制御します。ページが完全に読み込まれると、bodyに.loadedクラスが追加されます。 （0、0、0、0.5）から透明

window.onload = init; 
 

 
function init() { 
 
    document.body.classList.add("loaded"); 
 
}

body, 
 
figure{ 
 
    margin: 0; 
 
} 
 

 
figure { 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    opacity: 0; 
 
    transition: 2s opacity; 
 
} 
 

 
img { 
 
    width: 100vw; 
 
} 
 

 
figure:after { 
 
    transition: 2s background; 
 
    background: transparent; 
 
    content: ''; 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    position: absolute; 
 
} 
 

 
.loaded figure:after { 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.loaded figure { 
 
    opacity: 1; 
 
}

<figure> 
 
    <img src="https://images.unsplash.com/photo-1432637194732-34cedd856522?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=a135be75b0fa480c18b22b5e557f56b3" alt="">  
 
</figure>

から <figure>

遷移半透明の背景上に0から1まで

1. 遷移不透明度：これは、同時に2つのことを行い

   http://codepen.io/antibland/pen/EKrVKr

Answer 3

ブラウザがすべての画像の読み込みを完了し、フェードイン効果のように不透明度をゆっくりと変更するまで待つことができます。ここにプレビューがあります：それは、プレーンjavascriptのだ

var imageElement = document.getElementById('image'); 
 
var overlayElement = document.getElementById('overlay'); 
 
window.addEventListener("load", function() { 
 
    imageElement.style.opacity = "1"; 
 
    overlayElement.style.opacity = "1"; 
 
}, false);

body { 
 
    position: relative; 
 
} 
 
#image, 
 
#overlay { 
 
    width: 1000px; 
 
    height: 800px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    opacity: 0; 
 
    transition: all 2s ease-in-out; 
 
    -webkit-transition: all 2s ease-in-out; 
 
} 
 
#overlay { 
 
    background: rgba(0, 0, 0, 0.5); 
 
}

<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg"> 
 
<div id="overlay"></div>

。私はタグがcssだけを知っているが、あなたが望むものはcssだけでは不可能です。私はすぐにオーバーレイ効果を作りましたが、フェードイン効果のためにopacity: 0;とtransition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-outを除いて、CSSを気にしません。

javascriptは次のように動作します。DOMから要素を取得する2つの変数を作成します。画像のIDはimage、オーバーレイのIDはoverlayです。次に、eventlistenerをウィンドウに設定します。ウィンドウが完全にロードされると、関数内のすべてが実行されます。画像とオーバーレイの不透明度は1（可視）に設定されています。私たちのCSSプロパティーtransitionで、フェードイン効果を管理します。