Portfolio02ではフルスクリーンで画像を使っていますが、画像によってはリンクメニューが見づらくなってしまいます。
ナビゲーションボタンを変更する方法もありますが、ブレンドモードで画像を変化させることもできます。
リンクボタンに背景色を入れる
CSSの「.main-nav a」に「background-color、padding、border-radius」などを付け加える
CSS
.main-nav a {
color: #432;
background-color:#89c3eb;
padding: 5px 20px;
border-radius:8px;
}
背景画像にブレンドモードで色を重ねる
CSSの「#home」へ「background-color」「background-blend-mode」を付け加える。
background-color:好きな色;
background-blend-mode：好きなモードを選ぶ;
background-blend-mode:color-burn;
background-blend-mode:hard-light;
background-blend-mode:luminosity;
background-blend-mode:multiply;
background-blend-mode:overlay;
background-blend-mode:screen;
background-blend-mode:soft-light;
（他にもモードがあるので色々試してみましょう）
CSS
#home {
background-image: url(../images/topimg.jpg);
background-color:pink;
background-blend-mode:overlay;
min-height: 100vh;
}
背景画像にブレンドモードでグラデーションを重ねる
「CSS Gradient」で作成したグラデーションの「liner-gradient・・・」をコピーして
url(../images/topimg.jpg)の前にペーストする。後ろにカンマを忘れずに「,」
CSS
#home {
background-image: linear-gradient(207deg, rgba(74,130,231,1) 0%, rgba(235,250,50,1) 52%, rgba(231,29,101,1) 100%),url(../images/topimg.jpg);
background-blend-mode:hard-light;
min-height: 100vh;
}
背景画像にブレンドモードで画像を重ねる
background-image:url("背景画像のURL");にもう１つ url(""),を追加
※モードによっては見えづらい場合もあります。
CSS
#home {
background-image: url(../images/topimg.jpg),url("../images/face.jpg");
background-color:pink;
background-blend-mode:multiply;
min-height: 100vh;
}
