これも以前紹介した方法のバージョンアップ版。
この方法では、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 を調整すれば十分。
実際に表示してみるとこんな感じ。どちらでもそんなに違和感がない。ぜひお試しあれ。
なお画像はしらたま先生の「あくびチノちゃん」を拡大して背景透過処理をしたもの。