目的
- HTMLファイルの要素の透過率を設定する方法をまとめる。
押さえるポイント
- 透過率を変更する方法はopacityとrgbaの2種類が存在する
- opacityはプロパティとして透過率を設定する→要素に記載されているテキストまで透過させてしまう
- rgbaは色のカラーコードのように背景色を設定するついでに透過率を設定する→要素に記載されている文字は透過させない
opacityの書き方の例(テキストも透過させてしまう)
- 透過率は0.0～1.0の数字で指定する
- 0.0が透明
- 1.0が不透明
- 下記にCSSファイルの内容を記載する。
要素の名前かクラス名 {
opacity: 0.0～1.0の数字で指定;
}
opacityのより具体的な例
- h1要素の透過率を0.5に設定する。
- 背景色は既に黒となっている。
- 下記にHTMLファイルの内容を記載する。
<h1>おはようございます。</h1>
- 下記にCSSファイルの内容を記載する。
h1 {
opacity: 0.5;
}
rgbaの書き方の例(テキストを透過させない)
- 透過率は0.0～1.0の数字で指定する
- 0.0が透明
- 1.0が不透明
- background-colorプロパティ色指定方法などでrgbaで指定する(r:red g:green b:blue a:alphaの略)
※rgbでの色指定は赤、緑、青(色の三原色)の割合(1～255)を用いて色を指定する方法である
※カラーコードは16進数で色を設定する
※rgbは10進数で色を設定する
※カラーコードの16進数はrgb値を元に作られている
要素の名前かクラス名 {
background-color: rgba(1～255の赤の割合, 1～255の緑の割合, 1～255の青の割合, 0.0～1.0の透過率);
rgbaのより具体的な例
- h1要素の透過率を0.5に設定する。
- 背景色を黒に設定する。
- 下記にHTMLファイルの内容を記載する。
<h1>おはようございます。</h1>
- 下記にCSSファイルの内容を記載する。
h1 {
background-color: rgba(255, 255, 255, 0.5);
}