mask-imageで透過グラデーション

  • Updated: 2023.07.21
  • Published: 2022.11.18
  • 2,466views

概要

下記のように要素を透過グラデーションする方法です。
これを使用すると背景に溶け込ませるようなグラデーションにすることができます。

サンプル


HTML

<div class="mask-image-wrap">
    <div class="mask-image-main">
        <img loading="lazy" src="https://ilr.jp/wp/wp-content/uploads/2022/10/wordpress-youtube-1200x684.png" alt="">
    </div>
</div>

CSS

.mask-image-wrap{
background-color:#000000;
padding:3rem;
}

.mask-image-main{
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(10%, #000), color-stop(90%, #000), to(transparent));
    -webkit-mask-image: -webkit-linear-gradient(top, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(10%, #000), color-stop(90%, #000), to(transparent));
    mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
   line-height:0;
}
.mask-image-main img{
width:100%;
}

mask-imageにlinear-gradientでグラデーションを適応します。
今回のサンプルは上から下に上から高さ0〜20%までに透明から不透明にして、90%〜100%までに不透明から透明にしています。

mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);

赤の部分が透明、青の部分が不透明になります。


最後に

今回はmask-imageにグラデーションを使用しましたが、画像やclip-pathなどを使用すると色々な表現ができます。

関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ