ミギムキ

[CSS] 背景画像の端を透過させたい

下端を透過させた背景画像

サンプルコード

html

<section class="bg_seethrough"> </section>
スポンサー広告

CSS

.bg_seethrough { background: linear-gradient(to bottom, transparent 0%, transparent 70%, #fff 100%), url(./images/bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; }
  • 背景画像に「linear-gradient」でグラデーションカラーを被せます
  • グラデーションカラーは「to bottom」で上から下へのグラデーションを指定します。上端から70%までは色を透明にして非表示にし、70%から下端までを白にグラデーションさせています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

スポンサー広告