css3 カラー note_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3 カラー note_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:41:12

オリジナル

1344 人が閲覧しました

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カラーが完成しました。学びの道は無限です