如何实现多列等高倾斜DIV布局：背景图正立+hover仅图透明

我想要制作一个与父DIV等高的滑块/背景DIV，内部包含多个等角度倾斜的并排DIV，且DIV上方有文本/链接/标题等内容，效果如图所示：

目前已通过以下代码实现部分效果，但存在两个问题：

• 背景图随DIV倾斜，需要保持正立
• 鼠标hover时仅背景图透明度降低，文本不受影响

现有代码：

<style type="text/css">
* {
  padding:0;
  margin:0;
}
.container {
  display: flex;
  height: 600px;
  overflow:hidden;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
     background: #fff;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
}

.inner {transform: skew(25deg);}
.box:first-child {
  margin-left:calc((100% / 5) / -2);
}
.box:last-child {
  margin-right:calc((100% / 5) / -2);
}
}
</style>
<div class="container">
  <div class="box" style="background-image:url(https://picsum.photos/400/200/)"><div class="inner">Hello</div></div>
  <div class="box" style="background-image:url(https://picsum.photos/400/300/)"><div class="inner">Hello</div></div>
  <div class="box" style="background-image:url(https://picsum.photos/300/200/)"><div class="inner">Hello</div></div>
  <div class="box" style="background-image:url(https://picsum.photos/400/300/)"><div class="inner">Hello</div></div>
  <div class="box" style="background-image:url(https://picsum.photos/200/300/)"><div class="inner">Hello</div></div>
</div>

注：若在JSFiddle或CodePen中无法看到全屏效果，请将代码复制到demo.html文件中查看。

<style type="text/css">
* {
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  height: 600px;
  overflow: hidden;
}

.box {
  flex: 1;
  border: 1px solid;
  transform: skew(-25deg);
  position: relative;
  overflow: hidden;
  background: #fff;
}

/* 伪元素作为独立背景层 */
.box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-url) no-repeat center/cover;
  /* 反向倾斜抵消父元素的变形，保持背景正立 */
  transform: skew(25deg);
  /* 平滑过渡hover效果 */
  transition: opacity 0.3s ease;
}

.inner {
  transform: skew(25deg);
  position: relative;
  /* 确保文本层级高于背景层 */
  z-index: 1;
  padding: 20px;
  color: #fff;
  font-size: 24px;
}

.box:first-child {
  margin-left: calc((100% / 5) / -2);
}
.box:last-child {
  margin-right: calc((100% / 5) / -2);
}

/* hover时仅修改背景层透明度 */
.box:hover::before {
  opacity: 0.7;
}
</style>
<div class="container">
  <div class="box" style="--bg-url: url(https://picsum.photos/400/200/)"><div class="inner">Hello</div></div>
  <div class="box" style="--bg-url: url(https://picsum.photos/400/300/)"><div class="inner">Hello</div></div>
  <div class="box" style="--bg-url: url(https://picsum.photos/300/200/)"><div class="inner">Hello</div></div>
  <div class="box" style="--bg-url: url(https://picsum.photos/400/300/)"><div class="inner">Hello</div></div>
  <div class="box" style="--bg-url: url(https://picsum.photos/200/300/)"><div class="inner">Hello</div></div>
</div>

• 修复背景倾斜：把背景图从.box元素移至伪元素::before，给伪元素设置transform: skew(25deg)，抵消父元素的skew(-25deg)变形，让背景图保持正立。
• 实现hover效果分离：伪元素作为独立背景层，hover时仅修改它的opacity；给.inner设置z-index: 1，让文本层级高于背景层，不受透明度变化影响。
• 优化维护性：用CSS变量--bg-url统一管理背景路径，添加过渡效果让hover变化更自然。

内容的提问来源于stack exchange，提问作者Muhammad Hassan