[css]画像の端っこをフェードさせる方法

背景との兼ね合いとかでね。

pngなら関係ない話
こんな感じ

pngなら関係ない話

画像を透過させたいならpngを使うのが常套手段。

だけど、pngはでかくすると重くなる。
デカくて軽いといえばjpeg。

jpeg画像の端っこを背景色になるようにフェードさせる。
これだけなら、画像自体に背景色のグラデをつけたり、子要素とか疑似要素を重ねて擬似的に透過グラデーションを再現することができる。
なので基本的には問題ない。

だけど、背景に要素が重なってたり、背景画像を設置してたり、ベタ塗り以外の状況だと通用しない。

jpgで透過をやっていきたい、という話。

こんな感じ

mask-imageで画像にマスクを適用してやっていきましょう。

画像に直接設定できる。

<img src="image.jpg" class="sample">

右側をフェードさせたいならこう。

.sample{
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 15%,
        #000 85%,
        transparent 100%
    );
}

割合でなく実数で指定したいならこんな感じ。

.sample{
    mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 40px),
        transparent 100%
    );
}

backgroundで背景色をグラデさせたいときと同じですね。

mask-imageは全環境に対応してるっぽい。
よかったですね。

CSS mask-image プロパティ – CSS | MDN

mask-image は CSS のプロパティで、要素のマスクレイヤーとして使用する画像を設定し、マスク画像のアルファチャンネルと、 mask-mode プロパティの値に応じて、マスク画像の色の輝度に基づいて、マスク画像が設定されている要素…