ブログ投稿日時:
ブログ更新日時:
要素の背景色を設定するbackground-colorについて解説
1.
background-color とは
background-color とは、要素の背景色を指定するプロパティです。
2.
background-color の指定方法
background-color の指定方法と表示は下記の通りです。
<div class="background-color-code"></div>
<div class="background-color-name"></div>
<div class="background-color-rgba"></div>
.background-color-code {
width: 100%;
height: 300px;
/* background-color: 色; で指定 */
background-color: #ff0000;
}
.background-color-name {
width: 100%;
height: 200px;
/* background-color: 色; で指定 */
background-color: blue;
}
.background-color-rgba {
width: 100%;
height: 200px;
/* background-color: 色; で指定 */
background-color: rgba($color: #00ff00, $alpha: 0.5);
}
HTMLとCSSの表示
上記のように background-color を指定することで背景色を設定することができます。
色を指定する際はカラーコードやカラーネーム、rgbaなどを使用して色を指定することができます。
3.
今回のまとめ
この記事では background-color について解説しました。
background-color とは、要素の背景色を指定するプロパティです。
最後までお読みいただきありがとうございます。