急いでいます！

ｃｓｓでRGBの画像を重ねる

締切済

質問者：fuyu029
質問日時：2016/05/30 16:10
回答数：3件

ｃｓｓでR１枚、G１枚、B１枚、の画像を５０％くらい透過して重ねると、元の色に見えるようになりますか？
もしできるなら、コードを教えてくれるとありがたいです。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： SortaNerd
回答日時：2016/06/01 09:30

暗くなってもよければできます。

一番下を不透明度100%、真ん中を50%、一番上を33%で重ねれば、1/3に暗くなった元画像が見えます。

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2016/05/31 17:14

できません。

スライドの投影なら可能ですが、ディスプレイでは無理なのです。
三原色には光の三原色(加法混合)と色の三原色(減色混合)があります。
光の三原色で考えると
R : rgb(255,　0,　0)
G : rgb(　0,255,　0)
B : rgb(　0,　0,255)
ここで、RとGを合わせると
　　R : rgb(255,　0,　0)
＋）G : rgb(　0,255,　0)
￣￣Y : rgb(255,255,　0)￣￣
と黄色ができます。

が、opacity0.3で加算すると
　　R : rgb( 86,　0,　0)
＋）G : rgb(　0, 86,　0)
￣￣Y : rgb( 86, 86,　0)￣￣
と、なってしまいます。

減色混合でも同様で・・重ねて元の色を復元するのは無理なのです。
ほかにも、あくまでディスプレイの画素数と実際の画素数は異なるとか・・

私がここ( ( http://iruka.la.coocan.jp/old/science/light/ligh … ) で行った方法は、黒白のネガフィルムを作成してそれを赤と白色の光源で投影したものですが、これをディスプレイ上ではできないということ。

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2016/05/31 14:13

こんにちは

回答を待っている間に考えるか簡単なテストでもなさっていれば、すでに結論に辿りついていらっしゃることと思いますが・・・

単純に赤一色の画像を仮定してみれば、重ねたら50％の赤になるのがいいところ（実際は、重ねる順によって変わります）なので、元の色になるはずがないことは明らかですよね？

光の場合は加色混合ではありますが、50％透過にした時点で明度・彩度ともに下がります。他の色（原色）を重ねても、これが元に戻る要素はありません。
さらには、赤50％と青50％を重ねるにしても、順序によって色が変わります。
例えば、赤に青を重ねるとして、上にある青50％は自分より下にある色合いを50％透過することを意味します。下にあるのは赤50％ですから、結果としてその50％の赤25％が透過することになります。
順序が逆の場合は赤50％＋青25％となるので、重なった部分の色合いも順序によって異なるものになるはずです。
3色の場合もこれと同様ですが、上になっている色ほど支配的になると考えられます。

ご質問のように、RGBに分解されたデータを混合して表示する方法として考えられるのは、canvasのimagedataを利用して、各原色データをを加色演算することで可能になると思います。
http://www.html5.jp/canvas/ref/method/getImageDa …

※ ご提示の方法（50%透過で重ねる)の簡単なサンプルを作成してみました。
　　単純化して、赤の矩形と青の矩形をずらして重ねただけのものです。
　　最初のものは、比較のためのサンプル代わりなので重ねてはいません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
h4 { margin:1em 0 0.2em 0; }
div.orgcolor { height:100px; display: flex; }
div.orgcolor > div { width:150px; height:100px; }

div.colorbox { position: relative; height:100px; }
div.colorbox div { width:300px; height:100px; }
div.colorbox div { position: absolute; top: 0; left:0; }
div.colorbox div:nth-child(2) { left:150px; }

div.r { background-color: #F00; }
div.b { background-color: #00F; }
div.m { background-color: #F0F; }
div.trans { opacity: 0.5; }
</style>
</head>

<body>

<h4>比較サンプル</h4>
<div class="orgcolor">
<div class="r">赤</div>
<div class="m">　</div>
<div class="b">青</div>
</div>

<h4>50%赤の上に50%青</h4>
<div class="colorbox">
<div class="r trans">赤</div>
<div class="b trans">青</div>
</div>

<h4>50%青の上に50%赤</h4>
<div class="colorbox">
<div class="b trans">青</div>
<div class="r trans">赤</div>
</div>

</body>
</html>