css - 我不知道如何让混合模式与阴影一起使用

Question

这是屏幕混合模式应该做的：

这就是我的 CSS 所做的： https ://codepen.io/Thisisntme/pen/LYGypRz

* {
    mix-blend-mode: screen;
}
body {
    background: black;
    mix-blend-mode: screen;
}
h1 {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 12vw;
    color: White;
    
    mix-blend-mode: screen;
    
    z-index: 1;
    text-align: center;
    text-shadow: 5px 10px 5px #FF0000, -5px 10px 5px #00FF00,5px -10px 5px #0000FF;
}

<h1>testing testing</h1>

我究竟做错了什么？

Answer 1

考虑伪元素能够复制文本并且混合混合模式可以正常工作：

body {
  background: black;
}

h1 {
  font-family: "Work Sans", sans-serif;
  font-weight: bold;
  font-size: 15vw;
  color: White;
  display: table;
  margin: auto;
  position: relative;
}

h1::before,
h1::after,
h1 span::before,
h1 span::after {
  content: var(--text);
  mix-blend-mode: screen;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}
/* this will define the dimension of the element*/
h1::before {
  position: static;
  color: transparent;
}
/* */

/* Below your 3 layer of text */
h1::after {
  filter: blur(2px);
  color: #FF0000;
  transform: translate(5px, 10px);
}

h1 span::before {
  filter: blur(2px);
  color: #00FF00;
  transform: translate(-5px, 10px);
}

h1 span::after {
  filter: blur(2px);
  color: #0000FF;
  transform: translate(-5px, -10px);
}

<h1 style="--text:'testing'"><span></span></h1>