Right, background-color
is not an inherited property (compared to for example color
(color of text) which is). But even if it were, inheritance is not “enforced” so if website css sets a backround-color specifically for that element then the inherited value would be lost anyway.
But the way you now describe it doesn’t seem possible. There is not syntax to apply style rule to “just the innermost element”. I think the closest would be to have everything else have fully transparent background, but the html root element have only partial transparency:
*{
background: transparent !important;
}
html:root{
background: #00000080 !important;
}
However, you will still face a problem; many websites draw graphics or images as a background-image
so if you use the background
shorthand property then those graphics will be effectively removed. On the other hand, if you instead set just background-color
then parts might get opaque again because a website could be drawing even opaque backgrounds as background-image instead of background-color.
Yeah,
!important
doesn’t affect inheritance in any way. It only means that this particular rule is to be used if there are multiple rules that would set that particular property for the element in question (unless there’s some other more specific rule with !important tag as well). MDN lists property inheritance in the formal definition section. You can totally make background-color inherited though - like*{ background-color: inherit }
(and then set the property to something else on the root element from which you would want to inherit from) but it would then either not apply if website set it to anything else for an element or override any other set value if you used!important
tag.One other thing worth noting is that I would not recommend the rules mentioned for userChrome.css to be used as is - at least on window they completely break Firefox startup - it fails to display any window if you do that. Instead you should add a
[sessionrestored]
selector to wait a bit before those rules are applied to main-window:#main-window[sessionrestored], #tabbrowser-tabpanels{ background: transparent !important; }