ホームページ > 記事 > ウェブフロントエンド > css3 カラー note_html/css_WEB-ITnose
css3 カラー note_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:121320ブラウズ
css3 color
opacity
要素を半透明に見せます。
opacity:alphavalue || inherit
Alphavalue: デフォルト値は 1 で、0 から 1 までの任意の浮動小数点数を指定できます。値が 1 の場合、要素は完全に不透明になり、値が 0 の場合、要素は完全に透明になります。負の値は指定できません。
Inherit：親要素の不透明度設定の値を継承することを示します。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; background:#ff0000; border:1px solid; opacity:0.3; }</style></head><body> <div>胸无大志者，必受制于人</div></body></html> 不透明度は、背景色と前景色を含む要素全体を透明にします。
RGBA
RGBカラーモデル（三原色とも呼ばれます）は、赤、緑、青の3つのカラーチャンネルの変化とそれらの相互関係を使用して、さまざまな色を取得します。 。 CSS3 では、rgba は、rgb に基づいてアルファ透明度を制御するパラメータを追加します。
rgba(r,g,b,a)
r: 赤色の値。その値は正の整数またはパーセンテージです。
g: 緑色の値。その値は正の整数またはパーセンテージです。
b: 青色の値。その値は正の整数またはパーセンテージです。
a: アルファ透明度の値、その値は0から1の間です。
上記の 3 つのパラメーター r、g、b について、正の整数値の範囲は 0 ～ 255、パーセント値の範囲は 0% ～ 100% です。範囲外の値は、最も近い値の制限に丸められます。パラメータ a の値の範囲は 0 ～ 1 です。 4 つのパラメーター値はいずれも負にすることはできません。
div{ width:100px; height:100px; background:rgba(255,0,0,0.3); border:1px solid;} 不透明度と同様に、どちらも要素を透明にします。唯一の違いは、rgba は要素の背景色のみを透明にし、前景色は同じままであることです。
HSL
HSL は、RGB と同様に、色相 (色相)、彩度 (彩度)、明度 (明度) の 3 つのカラー チャネルの変化とそれらの重ね合わせを使用します。豊富な色。
りぃ h：ふえ。任意の整数値を取得します。0 (または 360 または -360) は赤、60 は黄色、120 は緑、180 はシアン、240 は青、300 はマゼンタを表します。値が 360 より大きい場合、実際の値は値を 360 で割った余りと等しくなります。
s：彩度。色の深さと鮮やかさはパーセンテージで表され、0% から 100% までの任意の値を指定できます。0% はグレースケールを表し、100% は最高の彩度を表します。
l：明るさ。値は彩度と同じで、0% が最も暗く、100% が最も明るくなります。
hsl(h,s,l)
HSLA
hsla は hsl の拡張モードで、hsl に基づいて不透明度パラメーターを設定するための透明チャンネル アルファを追加します。
div{ width:100px; height:100px; background:hsl(360,80%,80%); border:1px solid;}
hsla:(<length>,<percentage>,<percentage>,<opacity>)
css3カラーが完成しました。学びの道は無限です