CSSだけで画像の色が反転したように見せる

SHIROMA

2018.02.19

2023.04.04

タイトルは意味不明ですね。

とりあえずデモを見てもらえば意味が分かるかと思います。
デモページをスクロールをしつつ、画面右下にあるTwitterボタンをご覧ください（iPhoneだと見れないけど）。

demo

特定の要素を超えた部分の色が反転しているように見えます。

（background-attachment: fixed;を利用しているので、iOSでは使えないです…）

実装方法
- HTML
- CSS

実装方法

まず、塗が白い画像と黒い画像を二つ用意します。

HTML

HTMLは割とシンプルです。

<div class="wrapper">
  <section class="section bg-white">
    <!-- コンテンツ -->
  </section>
  <section class="section bg-black">
    <!-- コンテンツ -->
  </section>
  <a href="" class="twitter-button"></a>
</div>

CSS

.section {
  position: relative;
}
.bg-white {
  background-color: #fff;
}
.bg-black {
  background-color: #000;
}
.section::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom 20px right 20px;
  background-attachment: fixed;
  background-size: 30px 30px;
}
.bg-white::after {
  background-image: url(../img/twitter-bk.png);
}
.bg-black::after {
  background-image: url(../img/twitter-wh.png);
}
.twitter-button {
  position: fixed;
  display: block;
  width: 30px;
  height: 30px;
  bottom: 20px;
  right: 20px;
}

どうでしょう、若干の無理やり感がありますが見た目は悪くありませんね。

div要素を使っても良いですが、疑似要素（::after）のほうが楽です。

最初に書きましたが、2018年2月19日現在iOSではこの方法は使えません。JavaScriptやPHPなどで、iOSかどうかの判定をした上で実装するといいでしょう。

以上です。