Firefox

I want the entire background of any webpage to be transparent. Like this user had here..

For me, inheritance doesn't work as you described. Inner level rules don't always inherit from outer levels (I think if an inner background-color is set equal to a variable, it doesn't inherit it's parent's background). Setting root background doesn't affect body, setting body background doesn't effect elements further down the tree (e.g. a lemmy post will still have a background color while it's surroundings are transparent).

I can achieve what I want by setting the rule globally with:

* {
	background: transparent !important;
	background-color: transparent !important;
}

The problem with this approach is I don't actually want 100% transparency. I want at least above 75% to keep the content readable. However, with something like this:

* {
	background: #00000080 !important;
	background-color: #00000080 !important;
}

overlapping elements' transparency stack and create regions with different opacities all over the page.

edit: writing this game me an idea and combining the two works:

* {
	background: transparent !important;
	background-color: transparent !important;
}

body {
	background: #00000080 !important;
	background-color: #00000080 !important;
}