如何仅为标题div应用mix-blend-mode: screen镂空效果

不需要大幅修改HTML结构，仅通过调整CSS就能实现需求：让标题保留镂空效果，同时其他信息正常显示。

方案一（无需修改HTML） #

修改后的CSS代码 #

.div.cuadroinfopedraprod{
  position: absolute; 
  bottom: 0; 
  right: 180px; 
  z-index: 10; 
  background: #fff; 
  padding: 50px 60px 80px 60px; 
  mix-blend-mode: screen
}

/* 给其他信息容器添加白色背景，抵消父元素混合模式的影响 */
.restoinfo {
  background: #fff;
}

原理说明 #

父元素设置mix-blend-mode: screen后，白色背景会与背后的轮播图混合，标题因无额外背景，会直接与混合后的背景产生镂空效果；而restoinfo容器添加白色背景后，该区域的白色背景与父元素的白色背景通过screen模式混合后仍为白色，内部文字就能正常显示在白色背景上，不会出现透明问题。

方案二（微调HTML结构，更稳定） #

如果方案一效果不符合预期，可将标题与信息容器分离为同级元素，通过绝对定位控制布局：

调整后的HTML结构 #

<div class="divdefault">
 <div class="divdefault wrappedraimgswiper">
  <!-- 此处为加载图片的PHP逻辑 -->
  <div class="divdefault pedraimg slide" data-ratio="1.0773">
   <div class="imgpedraprod" style="width: 100%; height: 100%; background: url(img) no-repeat center center/cover"></div>
  </div>
 </div>
 <!-- 将标题从信息容器中移出，作为同级元素 -->
 <div class="divdefault titulopedraprod letra52 bold">Tittle</div>
 <div class="div cuadroinfopedraprod">
  <div class="divdefault restoinfo">
   <div class="divdefault">rest</div>
  </div>
 </div>
</div>

对应CSS代码 #

.titulopedraprod {
  position: absolute;
  bottom: 80px; /* 与信息容器的bottom值+底部padding匹配 */
  right: 180px;
  z-index: 11;
  mix-blend-mode: screen;
  color: #000;
  padding: 0 60px; /* 与信息容器的左右padding一致 */
}

.div.cuadroinfopedraprod {
  position: absolute;
  bottom: 0;
  right: 180px;
  z-index: 10;
  background: #fff;
  padding: 130px 60px 80px 60px; /* 顶部padding留出标题的高度空间 */
}

原理说明 #

标题直接与轮播图混合，信息容器的白色背景完全独立，既保证了标题的镂空效果，又让其他信息不受混合模式影响，布局稳定性更强。

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