时间戳

首页 > 解决方案 > 用 HTML 和 CSS “联锁”图像

html - 用 HTML 和 CSS “联锁”图像

问题描述

我正在尝试制作一种显示网站主页的滑动门效果，但我在使用的图像的 z-index 方面遇到了一些问题。基本上，图像的 z-index 需要高于其父容器的 z-index，以防止部分图像被截断。这有点难以解释，所以请看一下我放在一起演示的这个 codepen 。问题很明显，但只是图像应该互锁，但其中的一部分被另一个的父 z-index 覆盖。HTML 和 CSS 非常简单，只是让图像的 z 索引高于其父容器的 z 索引，这不起作用，我不知道为什么。

编辑：我应该明确提到问题是符号中底部图像的左侧部分被左侧图像的容器截断。这可以通过使图像的 z 索引高于容器的 z 索引来解决，但我不确定为什么这不起作用。

.curtain {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.right-panel {
  width: 50%;
  height: 100vh;
  float: left;
  z-index: 2;
  position: relative;
  background-color: #333;
  transition: transform 5s;
}

.left-panel {
  width: 50%;
  height: 100vh;
  float: left;
  z-index: 3;
  position: relative;
  background-color: #333;
  transition: transform 5s;
}

.content {
  position: absolute;
  width: 100%;
  top: 50%;
  background: 333;
  z-index: 1;
  text-align: center;
}

.left-img {
  right: 0%;
  margin-right: -12.5%;
  width: 25%;
  height: 50%;
  z-index: 2;
  position: absolute;
}

.right-img {
  float: left;
  width: 25%;
  height: 50%;
  margin-left: -12.5%;
  position: absolute;
}

.curtain:hover .left-panel {
  transform: translateX(-130%);
}

.curtain:hover .right-panel {
  transform: translateX(130%);
}
<div class="curtain">
  <div class="left-panel">
    <img src="https://i.ibb.co/30TCGB3/logo-top.png" class="left-img">
  </div>
  <div class="right-panel">
    <img src="https://i.ibb.co/GFCwpF0/logo-bottom.png" class="right-img">
  </div>
  <div class="content">
    <p>main site stuff</p>
  </div>
</div>

标签： htmlcssimage

解决方案

您.left-panel的 z-index 较高，因此它与内部的图像重叠.right-panel。并z-index创建一个新的堆叠上下文，防止其中的图像互锁。本质上，z-index 是相对于堆叠上下文的，而不是绝对数字。

我建议您构建您的 z 索引，使面板背景具有相同的 z 索引，并且图像具有更高的 z 索引（基本上创建 3 层：内容、封面背景、封面图像）。

为此，您需要重新组织标记，使背景成为每个面板图像的兄弟，这样z-index它就不会影响图像。你可以用一个实际的元素来做到这一点，但我将演示使用::before：

body {
  overflow: hidden;
}

.curtain {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  
  /* CSS variables to prevent duplication below */
  --piece-width: 100px;
}

.curtain .content {
  /* I used flex since I'm more comfortable with that, but you can use floats if you prefer. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.curtain-panel {
  display: flex;
  align-items: center;
  position: absolute;
  width: 50%;
  height: 100%;
  
  transition: left, right;
  transition-duration: 3s;
}

.curtain-panel.left {
  left: 0;
  justify-content: end;
}

.curtain-panel.right {
  right: 0;
}

.curtain-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  
  background-color: #333;
}

.curtain-piece {
  width: var(--piece-width);
  height: auto;
  z-index: 2;
  margin: calc(var(--piece-width) / -2);
}

.curtain:hover .left {
  left: -100%;
}

.curtain:hover .right {
  right: -100%;
}
<div class="curtain">
  <div class="curtain-panel left">
    <img src="https://i.ibb.co/30TCGB3/logo-top.png" class="curtain-piece">
  </div>
  <div class="curtain-panel right">
    <img src="https://i.ibb.co/GFCwpF0/logo-bottom.png" class="curtain-piece">
  </div>
  <div class="content">
    <p>main site stuff</p>
  </div>
</div>

此外，您不能transform在面板中使用 a，因为这也会创建堆叠上下文。如果您愿意，我强烈建议您阅读我链接的页面以更好地理解它。

推荐阅读