Ionic v6中如何为Ion Content背景图片设置透明度？

问题原因 #

你使用的--background-opacity是Ionic用于控制背景颜色透明度的CSS变量，当--background被设置为图片资源时，这个变量不会作用于背景图片，因此透明度设置无效。

解决方法 #

方法一：通过伪元素实现背景图片透明 #

修改组件SCSS，用伪元素单独渲染带透明度的背景图片，避免影响内容层级：

ion-content {
  position: relative;
  // 清空原有背景设置
  --background: transparent;
}

ion-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(splash1.png) no-repeat center center / cover;
  opacity: 0.5;
  z-index: -1; // 确保背景在内容下方
}

方法二：利用Ionic的Part伪元素直接修改背景元素 #

Ionic的ion-content内部有一个带有part="background"的元素负责渲染背景，直接针对该元素设置透明度：

ion-content {
  --background: url(splash1.png) no-repeat center center / cover;
}

ion-content::part(background) {
  opacity: 0.5;
}

两种方法都能实现背景图片50%透明度的效果，任选其一即可。

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