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意味着图像现在是并排的，不再叠加在彼此之上。

我已经尝试在图像周围添加一个容器div，将其居中，然后将图像绝对定位在其中，但它没有任何区别。他们俩仍然并排出现在中心之外。

编辑：第二个问题解决了。谢谢Chaz。请参阅下面的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的嵌套容器的工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

外部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容器内交叉淡入淡出图像？

3 个答案: