getComputedStyle('background-color') возвращает прозрачность, не наследует предок

Question

getComputedStyle должен возвращать окончательное вычисленное значение свойства CSS. Но для background-color все браузеры возвращают прозрачность (или rgba(x,x,x,0)) вместо вычисления в унаследованном значении от предков.

Метод работает только в том случае, если элемент имеет цвет фона, указанный напрямую (даже если через его класс, но не через определения родителя). Но это делает getComputedStyle бесполезным, оно должно учитывать все определения предков.

Метод отлично работает для других вещей, таких как цвет, как показано на скрипке.

Как я могу получить эффективный цвет фона элемента в JS вместо того, чтобы каждый элемент говорил мне, что он прозрачный?

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.textContent = 'Incorrect background-color: ' + compStyles.getPropertyValue('background-color') + ', but font color is correct: ' + compStyles.getPropertyValue('color');

/* no colors are specified for p */
p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  line-height: 2;
  font-size: 2rem;
  font-family: sans-serif;
  text-align: center;
}

/* this is the important part, only color gets inherited, not background-color */
div {
  background-color: purple;
  color: lightblue;
}

<!-- Original example taken from MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle -->

<div>
  <p>Hello</p>
</div>

Если это помогает, вопрос X состоит в том, как вычислить разницу яркости цвета между цветом шрифта и фоном для каждого элемента на странице в тексте пользователя;) То, что getComputedStyle не работает, делает его невозможным imho. Но этот вопрос должен быть интересен сам по себе.

Answer 1

Это потому, что свойство background-color не наследуется дочерними элементами (в отличие от свойства color).

Вы можете прочитать больше на: https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance

Answer 2

Это правильный результат, потому что цвет фона не наследуется. От MDN:

Начальное значение transparent
Относится ко всем элементам. Это также относится к ::first-letter а также ::first-line,
Унаследовано нет
Медиа- визуал
Расчетное значение вычисляемого цвета
Тип анимации цвет
Канонический порядок уникальный не однозначный порядок, определяемый формальной грамматикой

Answer 3

Чтобы совмещать другие ответы. Вот рабочий пример использования унаследованного CSS.

/* no colors are specified for p */
p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  line-height: 2;
  font-size: 2rem;
  font-family: sans-serif;
  text-align: center;
  background-color: inherit;  /* I added this */
}

/* this is the important part, only color gets inherited, not background-color */
div {
  background-color: purple;
  color: lightblue;
}

https://jsfiddle.net/meq6x5ay/