Path: csiph.com!.POSTED.208-71-239-109.cust.centrio.cz!not-for-mail
From: Cezary Tomczyk <cezary.tomczyk@gmail.com>
Newsgroups: comp.lang.javascript
Subject: Finding a real background color of an element
Date: Tue, 21 Aug 2018 19:40:59 +0200
Organization: csiph.com Internet News Service
Message-ID: <plhirc$1e8i$1@csiph.com>
Mime-Version: 1.0
Content-Type: text/plain; charset=utf-8; format=flowed
Content-Transfer-Encoding: 7bit
Injection-Date: Tue, 21 Aug 2018 17:41:00 -0000 (UTC)
Injection-Info: csiph.com; posting-host="208-71-239-109.cust.centrio.cz:109.239.71.208"; logging-data="47378"; mail-complaints-to="admin@kev009.com"
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:52.0) Gecko/20100101 Thunderbird/52.9.1
X-Mozilla-News-Host: news://nntpswitch.blueworldhosting.com:119
Content-Language: en-US
Xref: csiph.com comp.lang.javascript:35538

I am trying to figure it out how to determine a real background color of 
an element that is visible on the screen.

Here is a code example:
https://jsbin.com/mahabiyumi/edit?html,js,console,output

The trouble with determining background color is that it doesn't have to 
have same value as the user sees on the screen. In above example the 
element <h1> is visibly on the white background and

1) it has defined rgba(0, 0, 0, 0) by default
2) all parents are having also defined rgba(0, 0, 0, 0) by default

but I can clearly see that <h1> is having a white background color.

Note: I do skip elements that have defined position absolute or fixed.

Any suggestions are very welcome.

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/