混合混合模式在Chrome上不起作用 [英] mix-blend-mode doesn't work on Chrome

问题描述

我在Chrome上的混合混合模式有问题。它无法正常工作。
另一方面，在firefox和safari上，它没有问题。
我想实现抠图文字效果。
感谢您的帮助！

  h1 {
 mix-blend-mode：screen; 
背景：白色； 
颜色：黑色； 
} 
  

  body {背景：url（ https://images.unsplash.com/photo-1530518854704-23de978d2915?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6a5e654b18d678b37850cefea5872008&auto=format&fit ; w = 2477& q = 80）无重复字左/封面；} h1 {font-family： Righteous，草书；混合混合模式：屏幕；显示：flex; flex-flow：列;填充：0.5em;边距：0;字号：6em；线高：0.95;背景：白色；颜色：黑色文本转换：大写； max-width：max-content;}  

 < h1> ; < span>简单< / span> < span>剪裁< / span> < span>标题< / span> < span>效果< / span>< / h1>  

这里是 codepen

解决方案

Chrome在混合混合模式和主体方面存在一些问题

使用中间div作为图像

  .base {背景：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）font-repeat 1家庭：义，草书；混合混合模式：屏幕；显示：flex; flex-flow：列;填充：0.5em;边距：0;字号：6em；线高：0.95;背景：白色；颜色：黑色文本转换：大写； max-width：max-content;}  

 < div class = base>< h1> < span>简单< / span> < span>剪裁< / span> < span>标题< / span> < span>效果< / span>< / h1>< / div>  

I have a problem with mix-blend-mode on Chrome. It doesn't work properly. On the other hand on firefox and safari, it is working without problem. I want to achieve cutout text effect. Thanks for the help!

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>

Here is working code on codepen

解决方案

Chrome has some problems with mix-blend-mode and body

use an intermediate div for the image

.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>

这篇关于混合混合模式在Chrome上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！