bodyタグに複数の背景画像を設定し少し薄暗くする方法

Tweet

Pocket

/* 複数の背景画像を設定 */
body{
    background-image:url('背景画像1.jpg'),
                     url('背景画像2.jpg'),
                     url('背景画像3.jpg');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:5% 5%,95% 95%,center center;
    background-size:30%,30%,80%;
    background-attachment:fixed, fixed, fixed;
}

/* 背景を薄暗くする設定 */
body::before{
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content:'';
}

上記CSSの例ではbody要素に背景画像を3つ指定し、画像の大きさと位置が異なるように設定しています。

::before疑似要素では背景を薄暗く表示するよう設定。

表示イメージは以下のようになります

Tweet

Pocket

Related posts:

SNSボタンをすぐに作れる！FontAwesome5を使用したCSSボタンメーカー ホバー時にアイコンが動く！様々な種類のCSSアニメーションを簡単に設定しよう FontAwesomeを使用した影付きCSSアイコンボタンを作れる！ サイトやブログをダークモードに対応させよう ニコモジプラスを使用しtext-shadowでエンボス加工風の文字 フリーフォント「ほのか丸ゴシック」を使用しCSSでネオン風に装飾した文字 repeating-conic-gradient()を使用してCSSで集中線を作る Googleフォント「Anton」を使用しCSSでパッチ風のデザインにする方法 CSSの「mix-blend-mode」で画像と文字をブレンドさせてみた mix-blend-modeで2色で色分けする