背景容器文本设置白色未正常显示，如何调整CSS实现预期效果？

嘿，我来帮你搞定这个文字颜色的问题！你遇到的核心问题是mix-blend-mode: multiply这个属性在搞鬼——它会让.entry-header元素和下方的内容（比如你的缩略图）混合，同时也会影响内部文字的颜色显示，哪怕你设置了color: #fff也会被混合效果覆盖。

这里有两个靠谱的解决方案，你可以根据需求选：

方案1：移除混合模式（最简单直接） #

如果不需要背景和下方图片的混合效果，直接删掉mix-blend-mode: multiply这一行就行，这样白色文字就能正常显示了：

article.home-top-post .entry-header {
  position: absolute;
  bottom: 40px;
  left: 15px;
  z-index: 999;
  width: calc(100% - 34px);
  padding: 25px;
  color: #fff;
  background: #4c85c4 0 0 no-repeat padding-box;
  /* 移除这行混合模式代码 */
}

方案2：保留混合模式，修正文字颜色 #

如果你想保留背景和图片的混合效果，那需要给内部的文本元素单独设置样式，抵消父元素混合模式的影响：

article.home-top-post .entry-header {
  position: absolute;
  bottom: 40px;
  left: 15px;
  z-index: 999;
  width: calc(100% - 34px);
  padding: 25px;
  color: #fff;
  background: #4c85c4 0 0 no-repeat padding-box;
  mix-blend-mode: multiply;
}

/* 给所有文本元素设置白色，或者用混合模式抵消 */
article.home-top-post .entry-header a,
article.home-top-post .entry-header span {
  /* 方法A：强制设置白色，提高选择器权重 */
  color: #fff !important;
  /* 方法B：用screen混合模式抵消父元素的multiply效果，也能让文字变白 */
  /* mix-blend-mode: screen; */
}

简单说下原理：multiply混合模式会让元素颜色和下方内容相乘变暗，内部文字继承了这个模式，所以白色会被“压暗”显示不出来。给文字单独设置颜色或者反向的混合模式，就能让白色正常显示啦～

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