如何实现背景图叠加并设置上层背景图的透明度？

CSS原生的background多背景语法没法单独给某一层背景图设置透明度，因为透明度属性是作用于整个元素的，而非单个背景层。不过可以通过以下两种方法实现需求：

方法一：用伪元素分离背景层 #

把下层背景图放在主元素上，上层背景图放到伪元素里，再给伪元素设置透明度：

.hero-scent_microban_bkgrnd3 {
  margin-top: -30px;
  /* 下层背景图 */
  background: url(../img/home/bg_hero_microban_bkgrnd2.png);
  background-size: 100%; 
  background-repeat: no-repeat;
  background-position: center;
  /* 伪元素需要基于主元素定位 */
  position: relative;
}

/* 伪元素承载上层背景并设置透明度 */
.hero-scent_microban_bkgrnd3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/home/bg_hero_microban_overlay_bkgrnd2.jpg);
  background-size: 30%;
  background-repeat: no-repeat;
  background-position: center 50%;
  /* 调整透明度，0为完全透明，1为完全不透明 */
  opacity: 0.6;
  /* 避免伪元素遮挡主元素内的可交互内容 */
  pointer-events: none;
}

方法二：提前编辑图片透明度 #

直接用图片编辑工具（比如Photoshop）给上层的bg_hero_microban_overlay_bkgrnd2.jpg设置好目标透明度，保存后继续使用你原来的双背景代码即可，这种方法不需要修改CSS结构。

内容的提问来源于stack exchange，提问作者Paul T. Rykiel