designWeb全般webmasterデザインメモTOPWebデザインCSSヒーローヘッダーにグラデーションを重ねる方法Webサイトにアクセスした際に、写真や動画などが画面いっぱいに大きく表示されるイメージのことをヒーローヘッダーと言い、多くのサイトでも取り入れられているデザイン手法の1つです。そんなヒーローイメージにグラデーションを重ねるだけで写真の印象をガラリと変えることができます。背景画像として表示させることで簡単に画像とグラデーションを重ね合わせることができます。center;}まず、backgroundに対してグラデーションを指定します。そのあとに表示させたい画像を指定することで画像にグラデーションをかけることができます。あとは、background-sizeプロパティで値を「cover」にして、画面いっぱいに表示させれば完成です。DEMOまた、CSSのブレンドモードを利用すれば、違った雰囲気を表現することもできます。こちらは、「オーバーレイ」をブレンドした状態になります。ブレンドモードの使い方については、以下を参考にしてみてください。CSSのブレンドモードで画像の色彩を変える以上が、ヒーローヘッダーにグラデーションを重ねる方法となります。