新・オタク Atom の作り方

これも以前紹介した方法のバージョンアップ版。

この方法では、CSS をごちゃごちゃ書き換える上に、いろんなテーマに対応することができなかった。これでは移植性が低いので、プログラマ的にはゴミである。

そこで解決策を考えた。

簡単に言ってしまえば、body の真上に 1 つレイヤーを作って、そこに載せればいいじゃん、という話だ。body::after 要素の CSS を定義すればいいだけだし、最強っぽい。

しかしこれには 2 つ問題点がある。1 つめは、マウスクリックが効かないという問題。これは pointer-events: none; という指定をしてあげることで回避できる。

もう1つは、上に載せるために下のあるべきテキストが隠れてしまう（透過にしても薄くなってしまう）という問題である。これはブレンドモードを利用しよう。いろいろ試した結果、乗算モードが一番きれいになった。乗算モードであれば、背景が暗くても明るくてもだいたいマッチする。mix-blend-mode: multiply; を指定してやればよい。他のを試したければ、このへんを参考にすると良い。

最終的にはこんな感じになった。

@width: 1183px;
@height: 1608px;
@scale: 0.45;

body::after {
    right: 10px;
    bottom: 10px;
    background-image: url("/Users/Ishotihadus/Documents/AtomStyle/bg/3.png");
    mix-blend-mode: multiply;

    content: "";
    position: absolute;
    height: @height * @scale;
    width: @width * @scale;
    background-size: @width * @scale auto;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    opacity: .4;
    z-index: 100;
}

幅とか高さとかを指定してあげないとうまくいかなかったので、less で直に計算してあげることにした。濃さが気に入らなければ opacity を調整すれば十分。

実際に表示してみるとこんな感じ。どちらでもそんなに違和感がない。ぜひお試しあれ。

なお画像はしらたま先生の「あくびチノちゃん」を拡大して背景透過処理をしたもの。

Tweet