《CSS》オーバーレイについて

こんにちは、「なゆた」です！
今回は皆さんに、「CSS」での「オーバーレイ」の方法をお教えします！
「オーバーレイ」とは、背景イメージの「背景」としての印象を、もっと強調するために使われるPNGファイルの一種です。

①まず、HTMLファイルを作ります。こちらのファイルには、以下のタグだけを入れます。class名は何でも構いません。さあ、それが出来たら、次はCSSファイルと連携です！

②CSSファイルと連携したら、以下のタグだけに手を加えます。「linear-gradient」とは、CSSの関数で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。幅と高さ、背景の画像・位置・サイズは自由ですが、背景の「リピート」のみ絶対に「repeat, repeat, no-repeat」と入れましょう。背景画像には、自由な写真のJPGファイルと「オーバーレイ用のPNGファイル」を入れます。

③完成です！！

よく見てください。薄黒い正方形がたくさんありますよね？これが、「オーバーレイ」なんです！！

いかがでしたか？この「オーバーレイ」を付けることによって、サイトの印象がどんどん変わっていきますよ！皆さんもぜひやってみてください！
以上です、ありがとうございました！