不透明之前加载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> 

Answer 2

考虑一下这个想法。 我们将使用<img>容器的background属性（在我的示例中为<figure> ）的:after伪类来控制变暗。 页面完全加载后，我们将一个.loaded类添加到body 。 这同时做两件事：

1. 在<figure>上将不透明度从0转换为1
2. 将半透明背景从（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> 

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

Answer 3

好吧，您可以等到浏览器完成所有图像的加载，然后像淡入淡出效果一样慢慢改变不透明度。 这里是预览：

 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> 

它是纯JavaScript。 我知道标签只说了css，但是仅css是不可能的。 我很快创建了一个叠加效果，除了以下内容外，不要介意CSS： opacity: 0; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out入淡出效果。

javascript的工作方式如下：我创建了2个变量，这些变量从DOM中获取元素。 该图像具有ID image ，并且覆盖图具有ID overlay 。 接下来，我们在窗口中设置一个事件监听器。 窗口完全加载后，它将执行函数中的所有内容。 图像和叠加层的不透明度都设置为1 （可见）。 通过CSS属性transition我们可以管理淡入效果。