切换图片覆盖层时如何避免伪元素自定义边框高度变化

问题根源 #

边框高度变动核心是两个问题：

• .img-container没有固定高度，且内部所有img都设置了绝对定位脱离文档流，导致父容器高度塌陷，实际高度会随内部文档流元素变化而变动，而伪元素高度是按父容器高度的30%计算的，自然会同步变动
• 类名逻辑错误，当前你设置的.img-hidden没有隐藏效果，只是调整了层级和混合模式，元素实际始终存在，还可能因为样式变化影响父容器高度计算

修复方案 #

直接替换对应代码即可：

CSS

.container {
  position: relative;
  width: auto;
  height: auto;
  display: inline-block;
}
.info-container {
  position: absolute;
  width: auto;
  height: auto;
  display: grid;
  grid-template-areas: "inner-div";
}
/* Image wrap with corner borders */
.img-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 10px;
  background-color: #fff;
  display: grid;
  grid-template-areas: "inner-div";
}
.img-container::after {
  display: block;
  content: "";
  width: 30%;
  height: 30%;
  position: absolute;
  top: -10px;
  right: -10px;
  border-top: 2px solid #ff8a8a;
  border-right: 2px solid #ff8a8a;
  padding-top: 25px;
}
.img-container::before {
  display: block;
  content: "";
  width: 30%;
  height: 30%;
  position: absolute;
  bottom: -10px;
  left: -10px;
  border-bottom: 2px solid #ff8a8a;
  border-left: 2px solid #ff8a8a;
  padding-bottom: 25px;
}
.img-info {
  position: absolute;
  grid-area: inner-div;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.plan-overlay {
  position: absolute;
  grid-area: inner-div;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: multiply;
}
.img-hidden {
  display: none;
}

HTML

<div class="container">
  <div class="info-container">
    <div class="img-container">
      <img src="https://via.placeholder.com/200/ff0000" onClick="toggleImage()" class="img-info" />
      <div>
        <img src="https://via.placeholder.com/200/0000ff" id="PlanOverlay" onClick="toggleImage()" class="plan-overlay img-hidden" />
      </div>
    </div>
  </div>
</div>

JavaScript

function toggleImage(){
  document.querySelector('#PlanOverlay').classList.toggle('img-hidden');
}

如果需要默认显示覆盖层，去掉HTML中覆盖层元素的img-hidden类即可。

内容的提问来源于stack exchange，提问作者Daniel Taylor