我不知道如何让 mix-blend-mode 与阴影一起工作
I can't figure out how to get mix-blend-mode to work with shadows
屏幕混合模式应该这样做:
这是我的 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>
我做错了什么?
考虑伪元素能够复制文本,mix-blend-mode 可以正常工作:
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>
屏幕混合模式应该这样做:
* {
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>
我做错了什么?
考虑伪元素能够复制文本,mix-blend-mode 可以正常工作:
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>