我輩は雑記帖である。名はまだない。

【CSS】CSS だけで背景画像と透明度のフィルタ-を設定する

CodiMD のノ-トで画像だけを 少し暗くして背景に設定したかったので試作してみた。

別の要素に設定なんて必要ないんだよ !

サンプルコ-ド

body {
    background-image:
        linear-gradient(rgba(0, 0, 0, 透明度), rgba(0, 0, 0, 透明度)),
        url(画像のパス);
}

透明度 100 %

透明度 50 %

透明度 10 %

おまけ

CodiMD のノ-トに背景画像を設定する CSS 例。

<style>
    body, body.night {
        background-image:
            linear-gradient(rgba(0, 0, 0, 透明度), rgba(0, 0, 0, 透明度)),
            url(画像のパス)
            !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        background-attachment: fixed !important;
    }
    .ui-content, .ui-view-area {
        background-color: transparent !important;
    }
</style>

参考元

Amazon

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>