色の操作：

2色を透過で掛け合わせた色をシミュレート

色の透過プロパティを用いずに擬似的に透過を感じさせる色をシミュレートする。

String1
透過させる色(前面色)をHEX値で渡す #FFFFFF ・ #FFF ・ FFFFFF ・ FFF
Number
シミュレートする透過度を指定 0–100 ／ 0が不透明で、100が完全透過をシミュレート
String2
ベースとなる色(背景色)をHEX値で渡す #FFFFFF ・ #FFF ・ FFFFFF ・ FFF
●必須引数 ●オプション引数(省略可能)

記述例

$clrByClr('#FFFFFF', 50, '#000000')
$clrByClr('FFF', 50, '000')

戻り値

第2引数で指定した透過度をシミュレートしたHEX値を文字列で返す。

動作サンプル

それぞれのNodeの背景色に対して、指定したHEX値を前面に重ねるシミュレーション。

前面のHEX値：
  • 100%
  • 90%
  • 80%
  • 70%
  • 60%
  • 50%
  • 40%
  • 30%
  • 20%
  • 10%
前面のHEX値：
  • 100%
  • 90%
  • 80%
  • 70%
  • 60%
  • 50%
  • 40%
  • 30%
  • 20%
  • 10%
前面のHEX値：
  • 100%
  • 90%
  • 80%
  • 70%
  • 60%
  • 50%
  • 40%
  • 30%
  • 20%
  • 10%
Javascript : function sample1() { //1つ目のサンプルを動かすコード例 for(var cbci=0;cbci<10;cbci++) { var newColor=$clrByClr($id('input1').value,100-(10*cbci),'fff'); $tag('li','sample1',cbci).style.backgroundColor="#"+newColor; } }
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。