mix-blend-mode doesn't work on Chrome

前端 未结 1 1736
既然无缘
既然无缘 2021-01-21 10:54

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

相关标签:
1条回答
  • 2021-01-21 11:32

    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>

    0 讨论(0)
提交回复
热议问题