如何让背景混合模式仅作用于文本？WordPress Lay Theme求助

• 第一步：精准定位文本元素的选择器
  打开浏览器开发者工具（按F12），右键点击需要变色的文本选择「检查」。在弹出的Elements面板里，找到包裹文本的HTML标签，查看它的class属性（比如可能是lay-text、custom-text这类）。注意：类选择器用.开头，ID用#开头，不要加多余引号。

• 第二步：修正混合模式CSS代码
  替换掉你之前错误的选择器写法，比如文本的类是article-text，就写：

  .article-text {
    mix-blend-mode: difference;
  }
  

  优先不要用!important，除非确认有其他CSS规则覆盖了当前样式。

• 第三步：隔离缩略图避免被影响
  如果仍不小心影响到缩略图，试试两种方法：

  1. 给文本单独套一个容器，只对容器内的文本应用混合模式：

     .text-wrapper > p {
       mix-blend-mode: difference;
     }
     

  2. 用:not()选择器排除缩略图的类，假设缩略图类是post-thumb：

     .lay-content:not(.post-thumb) {
       mix-blend-mode: difference;
     }
     

• 第四步：测试调整
  把修改后的CSS粘贴到Lay Theme的自定义CSS面板，保存后刷新页面，查看文本和缩略图的显示效果，反复调整选择器直到符合预期。

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