如何实现设计稿中背景色控发色、留白透明的网页效果？

要实现设计稿中「修改背景色改变头发颜色、空白区域保持透明」的效果，同时支持多颜色+多混合模式叠加，核心是用CSS Mask限制颜色层的显示区域，配合多层元素/伪元素实现多混合模式效果，具体实现如下：

基础实现（双颜色层） #

HTML #

<div class="hair-container"></div>

CSS #

.hair-container {
  width: 413px;
  height: 363px;
  position: relative;
  overflow: hidden;
}

/* 第一层颜色：深棕色，multiply混合模式 */
.hair-container::before {
  content: '';
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left: 0 */
  background-color: #9b5f45;
  mix-blend-mode: multiply;
  /* 用头发图作为遮罩，仅在头发区域显示颜色 */
  mask: url("https://raw.githubusercontent.com/BonjourYY/image-server/master/hair.png") center/cover no-repeat;
  -webkit-mask: url("https://raw.githubusercontent.com/BonjourYY/image-server/master/hair.png") center/cover no-repeat;
}

/* 第二层颜色：浅棕色，screen混合模式 */
.hair-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #d4a574;
  mix-blend-mode: screen;
  mask: url("https://raw.githubusercontent.com/BonjourYY/image-server/master/hair.png") center/cover no-repeat;
  -webkit-mask: url("https://raw.githubusercontent.com/BonjourYY/image-server/master/hair.png") center/cover no-repeat;
}

扩展到三颜色层（匹配设计稿需求） #

单个元素仅支持::before/::after两个伪元素，若需要三个混合层，可添加额外的div元素实现：

HTML #

<div class="hair-container">
  <div class="color-layer layer-1"></div>
  <div class="color-layer layer-2"></div>
  <div class="color-layer layer-3"></div>
</div>

CSS #

.hair-container {
  width: 413px;
  height: 363px;
  position: relative;
  overflow: hidden;
}

/* 统一设置所有颜色层的遮罩和定位规则 */
.color-layer {
  position: absolute;
  inset: 0;
  mask: url("https://raw.githubusercontent.com/BonjourYY/image-server/master/hair.png") center/cover no-repeat;
  -webkit-mask: url("https://raw.githubusercontent.com/BonjourYY/image-server/master/hair.png") center/cover no-repeat;
}

/* 第一层：深棕色 + multiply混合 */
.layer-1 {
  background-color: #9b5f45;
  mix-blend-mode: multiply;
}

/* 第二层：浅棕色 + screen混合 */
.layer-2 {
  background-color: #d4a574;
  mix-blend-mode: screen;
}

/* 第三层：高光色 + overlay混合 */
.layer-3 {
  background-color: #e6c598;
  mix-blend-mode: overlay;
}

原方法无效的原因 #

你之前直接给容器设置background: 图片 + 颜色并使用background-blend-mode，存在两个核心问题：

1. 容器背景色会填充整个区域，导致头发之外的透明部分也被颜色覆盖
2. background-blend-mode仅能实现单背景图与单背景色的混合，无法支持多颜色+多混合模式的叠加

而CSS Mask方案的优势在于：

• 颜色层仅在头发的非透明区域显示，空白区域保持完全透明
• 每个颜色层可独立设置混合模式，完美还原设计稿的多图层结构

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