柔らかい、ふわっとした印象になります。
opacity とRGBa の違いについて確認しておきましょう。
透明にするCSS：opacity とRGBa 違いを解説
私は実は、どっちでも良いと思っていました。
でも、全然良くありません。
明確に違います。
簡単に言うと、透明にさせるのが背景色だけか、
文字ごとか、です。
参考にしたサイト
透明度を表す「opacity」 と 「RGBa」の違いと使い分け
http://weboook.blog22.fc2.com/blog-entry-282.html
opacityで透過・透明にする、CSS
.hoge01 {
background:#F5A9A9;
color:#000;
opacity:0.5;
}
このようなコードですね。
背景色とカラー(文字色)を指定しています。
背景と文字色の両方が透過されます。
文字も薄くなるので、透明度に注意。
opacity:0.5;
で、透過させています。
0.5はだいたい中間くらい。
0.1～0.9で好きな透明度に指定できます。
RGBaで透過・透明にする、CSS
.hoge02 {
background:rgba(245,169,169,0.5);
color:#000;
}
こちらはRGBaのCSSですね。
rgba(245,169,169,0.5);
この様な形式で入力します。
さっきと同じ背景色ですが、
前からR、G、Bのそれぞれの数値を記入しています。
a→alphaを指します。透明度を意味しています。
R、G、Bそれぞれの数値については、
Photoshopやペイント等でも見れますが、
こちらのサイトで確認できます。
HTMLカラーコード
http://html-color-codes.info/japanese/
試しに
#F5A9A9
と入力して、R、G、Bのそれぞれの数値を確認してみて下さい。
RGBaでは、文字色は透過されません。
背景色だけ透明にして、
文字色はクッキリ見せたいときは便利。
上手に使い分けましょう(^_^)
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク