如何在 flexbox 容器内交叉淡入淡出图像？

Question

要使用 CSS 交叉淡入淡出两个图像，我们通常会这样做（假设 CSS 中存在过渡的跨浏览器兼容性）

#crossfade img {
  position: absolute;
  left: 0;
  width: 200px;
  transition: opacity 1s ease-in-out;
}
#crossfade img.top:hover {
  opacity: 0;
}

<div id="crossfade">
  <img class="bottom" src="http://badd.ie./_images/google-logo.png" />
  <img class="top" src="http://badd.ie./_images/chrome-logo.png" />
</div>

到目前为止，一切如常。

现在，如果我想使图像垂直居中，我会使用 flexbox：

CSS:

#crossfade {
  display: flex;
  align-items: center;
  justify-content: center;
}

但是出现了两个问题。首先，position: absolute; 破坏了 flexbox 居中，因为图像的左上角像素以 flexbox 为中心而不是中心像素。其次，使用 flexbox 意味着图像现在是并排的，不再相互重叠。

我试过在图像周围添加一个容器 div，将其居中，然后将图像绝对定位在其中，但没有任何区别。他们仍然并排出现并且偏离中心。

编辑：第二个问题已解决。谢谢查兹。请参阅下面的 MCVE 以更好地了解我正在尝试做什么。这几乎是原样，除了我用问号换掉了 FontAwesome 的东西。

编辑：这两个问题现在都解决了。谢谢尼尔。以下代码段已更新以显示有效。

var minHeaderHeight = 100; // Height of shrunken header, in pixels
var header = document.querySelector("#header"); // The header object
var maxHeaderHeight = outerHeight(header, true); // Height of expanded header, in pixels

document.addEventListener("DOMContentLoaded", initHeader);

function initHeader() {
 var landingImage = document.getElementById("landing-image");
 if (landingImage !== null) { 
  header.classList.add("expanded");
    window.addEventListener('scroll', scrollCallback);
 } else {
  header.parentNode.style.paddingTop = minHeaderHeight + "px";
 }
}

function scrollCallback() {
 var scrollOffset = windowScrollTop();
 var transitionEvent;
 if (scrollOffset > 10) {
  header.classList.remove("expanding");
  header.classList.add("shrinking");
  header.classList.remove("expanded");
 } else {
  header.classList.remove("shrinking");
  header.classList.add("expanding");
  header.classList.add("expanded");
 }
}

// THESE TWO FUNCTIONS REPLICATE SIMILAR FUNCTIONS FROM JQUERY
function outerHeight(el, withMargins) {
 withMargins = withMargins || false;
 if (withMargins) {
   var height = el.offsetHeight;
   var style = getComputedStyle(el);
   height += parseInt(style.marginTop) + parseInt(style.marginBottom);
   return height;
 } else {
  return el.offsetHeight;
 }
}

function windowScrollTop(pos) {
 if (typeof pos === 'undefined') {
  if (window.pageYOffset !== undefined) {
   return window.pageYOffset;
  } else {
   return (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }
 } else {
  document.documentElement.scrollTop = pos;
  document.body.parentNode.scrollTop = pos;
  document.body.scrollTop = pos;
  window.pageYOffset = pos;
 }
}

#header {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #000;
  height: 100px;
  text-transform: uppercase;
  font-size: 2em;
  color: white;
}

#header a {
 color: white;
  text-decoration: none;
}

#header-inner {
 width: 100%;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
 
#header.expanded {
 height: 100vh;
 background-color: transparent;
}

#header.expanding {
 -webkit-transition: height 300ms ease-in-out, background 300ms ease-in;
 -moz-transition: height 300ms ease-in-out, background 300ms ease-in;
 -ms-transition: height 300ms ease-in-out, background 300ms ease-in;
 -o-transition: height 300ms ease-in-out, background 300ms ease-in;
  transition: height 300ms ease-in-out, background 300ms ease-in;
}

#header.shrinking {
 -webkit-transition: height 300ms ease-in-out, background 300ms ease-in;
 -moz-transition: height 300ms ease-in-out, background 300ms ease-in;
 -ms-transition: height 300ms ease-in-out, background 300ms ease-in;
 -o-transition: height 300ms ease-in-out, background 300ms ease-in;
  transition: height 300ms ease-in-out, background 300ms ease-in;
}

#header-logos {
 position: relative;
}

#header-logos img {
 position: absolute;
 top: 50%;
 left: 50%;
    transform: translate(-50%, -50%);
 max-height: 100px;
}

#header.shrinking img {
 -webkit-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -ms-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
}

#header.expanding img {
 -webkit-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -moz-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -ms-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  -o-transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
  transition: opacity 300ms ease-in-out, max-height 300ms ease-in-out;
}

#header-logo-top {
 opacity: 0;
}

#header.expanded #header-logo-top {
 opacity: 1;
}

#header.expanded img {
  max-height: 500px;
}

#landing-image {
 height: 100vh;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

#landing-image.home-page {
 background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/2f/KANTHALLOOR%2CEruvikulam%26Anamalais_in_the_background.jpg");
}

#page-content {
    max-width: 750px;
}

<div id="header">
  <div id="header-inner">
   <div class="header-button menu-bars">
       <a href="#">?</a>
   </div>
    <div id="header-link-1" class="header-button">
        <a href="#" class="btn">Link 1</a>
    </div>
    <div id="header-link-2" class="header-button">
        <a href="#" class="btn">Link 2</a>
    </div>
    <div id ="header-logos" class="header-button">
   <a href="#"><img id="header-logo-bottom" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1000px-Google_%22G%22_Logo.svg.png"></a>
   <a href="#"><img id="header-logo-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_%282011%29.svg/2000px-Google_Chrome_icon_%282011%29.svg.png"></a>
   </div>
    <div id="header-dates" class="header-button">
        1 | 2 | 3 JAN 2018
    </div>
    <div id="header-socials" class="header-button">
   <a href="#">?</a>
   <span>|</span>
   <a href="#">?</a>
   <span>|</span>
   <a href="#">?</a>
   <span>|</span>
   <a href="#">?</a>
   <span>|</span>
   <a href="#">?</a>
    </div>
   <div class="header-button spacer">
   </div>
  </div>
</div>
<div id="landing-image" class="home-page"></div> 
<div id="page-content">
LOREM IPSUM DOLOR SIT AMET, consectetur adipiscing elit. Nullam scelerisque magna non dui auctor placerat. Vestibulum cursus placerat mauris eget luctus. Maecenas sollicitudin mauris id erat porttitor, in dapibus ligula commodo. Donec sagittis sagittis felis non elementum. Nam facilisis non sapien non ultrices. Morbi cursus molestie nibh non tincidunt. Sed sagittis erat eu enim condimentum, ut lobortis nisi faucibus. Cras orci felis, molestie in ligula sit amet, vestibulum malesuada augue. Nullam id aliquam enim, eu vestibulum massa. Mauris ultricies ante sit amet leo ullamcorper, a lacinia nulla hendrerit. Aenean eros dolor, semper non nisi eu, maximus accumsan felis. Donec facilisis pellentesque lacus, quis vestibulum ipsum pretium tempus. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut ultrices quam quis augue scelerisque, vitae hendrerit nunc iaculis. Morbi lobortis, arcu non luctus scelerisque, quam libero ullamcorper neque, eget rhoncus nulla enim sit amet metus. Praesent eget risus euismod, posuere turpis in, lobortis dui. Aliquam mattis leo elit, a accumsan urna maximus a. Duis lacinia ex hendrerit, lobortis massa volutpat, lacinia mi. Vivamus ullamcorper mauris libero, a semper justo vulputate ut. In eget semper nibh. Fusce venenatis maximus nisi. Integer vel suscipit risus. Nulla mollis est a velit molestie pharetra. Donec sed imperdiet dui, id ultricies massa. Aliquam dictum arcu ac viverra fringilla. In placerat lorem in egestas cursus. Sed eleifend tortor quis augue accumsan, eget rhoncus turpis finibus. 
Fusce aliquet finibus lectus, bibendum ornare ex aliquam nec. Fusce efficitur felis luctus fermentum ullamcorper. Maecenas eget urna nibh. Nulla luctus sit amet sem eget interdum. Aenean placerat fermentum metus, a tempus purus imperdiet quis. Aliquam ac quam a dui volutpat sagittis. Duis mollis scelerisque tristique. Quisque lacinia consectetur metus, non vulputate tortor malesuada sed. Curabitur dictum ac risus in elementum. 
Vivamus ultricies lacinia tempus. Donec eu mi arcu. Ut porttitor nulla vel elit faucibus condimentum. Mauris volutpat orci non libero tristique, vel euismod nisi aliquam. Phasellus fermentum euismod erat vitae feugiat. Nulla venenatis auctor venenatis. Praesent ullamcorper eget odio ac blandit. Aliquam non lacus a risus aliquet ornare eget id justo. Donec quis elementum orci, non dapibus lectus. Mauris sodales tortor id leo posuere feugiat. Cras congue commodo justo, a commodo dolor luctus ut. Quisque fringilla rhoncus nunc, eget tincidunt justo pharetra quis. Donec condimentum dapibus ex, non condimentum ex varius eu. Maecenas a lectus ut ipsum interdum vulputate. Morbi ac lorem a turpis sollicitudin bibendum non eu lectus. Quisque pretium lacus eu ipsum eleifend efficitur. 
Nulla fermentum enim quis sapien accumsan, sit amet consectetur justo laoreet. Integer tortor nibh, dapibus quis nisi nec, euismod sagittis arcu. Ut vehicula nisi vitae ante efficitur congue. Vivamus malesuada facilisis tortor. Maecenas maximus felis at justo finibus volutpat vitae sed dolor. Suspendisse quis nulla massa. Aliquam dignissim leo ut arcu viverra fringilla. Morbi convallis dignissim augue, at pharetra purus. Cras neque elit, dictum et eros eget, faucibus varius ligula. In tincidunt dolor quis accumsan ornare. Ut eget efficitur sapien. Maecenas nunc justo, malesuada quis porta quis, dignissim ac enim. Nulla vestibulum odio ac sem egestas, et lobortis metus aliquam. Mauris at tincidunt erat. Fusce ut dictum diam. 
Sed luctus sem vel euismod imperdiet. Fusce non tincidunt elit, id aliquet ipsum. Aliquam quam libero, tincidunt id diam eu, pretium porta velit. Mauris placerat efficitur ipsum non fringilla. In suscipit ipsum quis leo faucibus, ut porttitor diam porta. Donec luctus, mauris non posuere aliquam, neque velit euismod ipsum, vitae ornare erat sapien in nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consequat tortor sed dui placerat lacinia. Vivamus tempus ultrices massa, vitae sagittis enim convallis sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Phasellus volutpat, dolor vel laoreet efficitur, nunc mauris tempus velit, at rhoncus orci magna ut eros. Proin elementum, nibh vitae eleifend venenatis, ante lacus iaculis arcu, nec varius justo nunc nec lorem. In faucibus ligula dui, vitae tincidunt libero ullamcorper sit amet. In in consectetur velit. Proin non elit ut purus ullamcorper ultricies sed pharetra ex. Proin neque elit, suscipit quis dui id, varius consequat libero. Aenean pharetra massa vel tortor hendrerit bibendum. Phasellus aliquam vulputate neque eu interdum. Quisque commodo faucibus ullamcorper. Morbi accumsan, nisl id porta bibendum, metus tortor faucibus leo, in volutpat arcu enim a nunc. Vestibulum hendrerit, mi vel bibendum tincidunt, nibh sem sagittis purus, quis tincidunt nibh magna in sem. Nunc placerat mollis dolor, at volutpat libero commodo id. Suspendisse suscipit mattis libero, suscipit iaculis nibh rhoncus et. 
Quisque vitae metus diam. Cras at tempus ipsum. Etiam gravida ornare ante, vitae facilisis lacus maximus vitae. Donec gravida interdum ante, quis euismod urna vulputate id. Suspendisse diam nunc, interdum nec elementum vel, dapibus at risus. Phasellus varius scelerisque mi. Duis scelerisque neque sit amet ligula gravida pharetra. Duis pretium id lectus id viverra. Sed pellentesque, sem in rhoncus euismod, justo libero tincidunt erat, id pellentesque ex sapien gravida quam. Duis urna nisl, accumsan quis mi molestie, finibus pellentesque metus. Aenean semper velit id neque dignissim, eget gravida lacus interdum. Nullam a tincidunt justo, et fermentum eros. Nunc eget dolor erat. Integer id lorem finibus, sodales nunc ut, vulputate est. 
Donec varius nulla eros, quis accumsan velit euismod nec. Sed tempus nulla sed faucibus sodales. Mauris at ligula arcu. Integer vulputate tincidunt arcu sit amet lacinia. Integer placerat quis lectus lobortis sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ac pretium enim. Donec libero turpis, pellentesque non sagittis quis, vehicula at ex. Maecenas semper purus sed blandit tincidunt. Ut in scelerisque mi. Vivamus erat nunc, sagittis non augue blandit, molestie porttitor nunc. Aliquam laoreet non dolor vitae varius. Proin lorem dui, maximus ac tortor in, faucibus tristique ex.
</div>

Answer 1

不要使用 flexbox 使图像居中，结合使用 left、top 和 transform：translate;

#crossfade {
 position:relative;
}
#crossfade img {
  position: absolute;
  left: 50%;
  top: 50%;
  transfrom: translate(-50%, -50%);
}

Answer 2

您没有为第二次尝试使用另一个容器提供代码，因此我们只能假设您做了什么；然而，这里有一个使用带有 flexbox 的嵌套容器的工作示例：

.box {
  width: 700px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: lightblue;
}

.images {
  width: 350px;
  height: 150px;
  position: relative;
}

.images img {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 1s ease 0s;
}

.img2 {
  filter: sepia(50%);
  opacity: 0;
}

.images:hover img.img2 {
  opacity: 1;
}

<div class="box">
  <div class="images">
    <img src="http://via.placeholder.com/350x150">
    <img class="img2" src="http://via.placeholder.com/350x150">
  </div>
</div>

外部 flexbox 容器使内部容器居中，内部容器的相对位置允许图像 absolute。如果您预先知道图像的尺寸，这将有效。

Answer 3

感谢下面的 Neil 和 Chaz。答案如下：

在 flexbox 项目中，您有一个图像容器。然后将以下样式应用于容器和图像：

.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

然后图像容器可以放在 flexbox 项目容器中。

我已经更新了上面的代码片段以证明它可以正常工作。

如何在 flexbox 容器内交叉淡入淡出图像？

How can I crossfade images inside a flexbox container?

css

overlay

centering

flexbox

cross-fade