ミギムキ

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

公開日:2020/07/14

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

背景画像を設定したエリアと設定していないエリアは、境界部分が目立ちやすいです
この端の境界部分を透過させることで、エリアの継ぎ目をなじませることができます

サンプルコード

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です。