不透明度前加载CSS rgba背景颜色

Question

我有一个图像占据了整个视口.最重要的是一个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>