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

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

在<figure>
将半透明背景从（0,0,0,0.5）转换为透明

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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是不可能的。我很快就创建了叠加效果，除了opacity: 0;和transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out之外，不介意使用css作为淡入效果。

javascript的工作原理如下：我创建了两个从DOM中获取元素的变量。该图片的ID为image，而叠加层的ID为overlay。接下来，我们将eventlistener设置到窗口。当窗口完全加载时，它应该执行函数中的所有内容。图像和叠加层的不透明度设置为1（可见）。使用我们的css属性transition，我们可以管理淡入效果。

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

3 个答案: