网站中背景渐变与图片无法叠加显示的问题求助

不是颜色本身的问题，是你用的渐变颜色是完全不透明的，导致渐变层直接把下方的图片完全覆盖，所以只能看到其中一个。

解决方法一：给渐变添加透明度 #

把渐变里的rgb()改成rgba()，最后一个参数设置透明度（取值0-1，0为全透明，1为完全不透明），让图片能透过渐变显示出来：

.background {
  background: linear-gradient(.25turn, rgba(12, 14, 22, 0.7), rgba(172, 7, 197, 0.7)), url("./PulseB2.jpg");
  height: 500px;
  width: 1663px;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-size: cover;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-text {
  color: #fff;
  display: inline;
  padding: 10px;
  font-size: 40px;
  text-transform: uppercase;
  vertical-align: middle;
}

解决方法二：使用背景混合模式 #

如果不想调整透明度，可以添加background-blend-mode属性，让渐变和图片以混合模式叠加，比如multiply、overlay等，可根据需求选择合适的模式：

.background {
  background: linear-gradient(.25turn, rgb(12, 14, 22), rgb(172, 7, 197)), url("./PulseB2.jpg");
  background-blend-mode: multiply; /* 可替换为其他混合模式 */
  height: 500px;
  width: 1663px;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-size: cover;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-text {
  color: #fff;
  display: inline;
  padding: 10px;
  font-size: 40px;
  text-transform: uppercase;
  vertical-align: middle;
}

两种方法都能实现渐变与图片的叠加，文本会正常显示在最上层（文本作为DOM元素，层级高于背景）。

内容的提问来源于stack exchange，提问作者Davion Williams Jr.