我在Chrome上的混合混合模式有问题。它不能正常工作。 另一方面,在Firefox和Safari上,它可以正常工作。 我想实现抠图文字效果。 感谢您的帮助!
h1 {
mix-blend-mode: screen;
background: white;
color: black;
}
body {
background: url("https://images.unsplash.com/photo-1530518854704-23de978d2915?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6a5e654b18d678b37850cefea5872008&auto=format&fit=crop&w=2477&q=80")
no-repeat left / cover;
}
h1 {
font-family: "Righteous", cursive;
mix-blend-mode: screen;
display: flex;
flex-flow: column;
padding: 0.5em;
margin: 0;
font-size: 6em;
line-height: 0.95;
background: white;
color: black;
text-transform: uppercase;
max-width: max-content;
}
<h1>
<span>Simple</span>
<span>Cutout</span>
<span>Heading</span>
<span>Effect</span>
</h1>
这里是codepen上的有效代码
答案 0 :(得分:1)
Chrome在混合混合模式和主体方面存在一些问题
为图像使用中间div
.base {
background: url("https://images.unsplash.com/photo-1530518854704-23de978d2915?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6a5e654b18d678b37850cefea5872008&auto=format&fit=crop&w=2477&q=80")
no-repeat left / cover;
}
h1 {
font-family: "Righteous", cursive;
mix-blend-mode: screen;
display: flex;
flex-flow: column;
padding: 0.5em;
margin: 0;
font-size: 6em;
line-height: 0.95;
background: white;
color: black;
text-transform: uppercase;
max-width: max-content;
}
<div class="base">
<h1>
<span>Simple</span>
<span>Cutout</span>
<span>Heading</span>
<span>Effect</span>
</h1>
</div>