🔥

要素の色を背景と反対にする

2022/07/09に公開

挙動

スクロールで反転確認可能です

ソース

HTML

<main style="padding-bottom:200vh;">
  <p class="hoge" style="font-size:4rem;"></p>
  <div style="background-color:black; height:200px;"></div>
  <div style="background-color:white; height:200px;"></div>
  <div style="background-color:black; height:200px;"></div>
  <div style="background-color:white; height:200px;"></div>
</main>

CSS

.hoge {
  filter: invert(100%);
  mix-blend-mode: exclusion;
  position: fixed;
  top: 2%;
  right: 2%;
}

Discussion