I think the answer depends on which elements exactly you want to make transparent. The page is a layered structure. The html root element is behind them all. Then body element is on top of that, the rest of the elements on top of body, etc.
So if you intend to have transparency all the way down, then you need to make sure that all the elements in that stack are transparent. If any single item in a stack has an opaque background then the transparency effect stops at that.
As an example, if you set background:transparent
to just body but not the document root element, then body will indeed be transparent, but it does not matter because the root will still be opaque. Likewise, if root is made transparent, but there is any opaque layer on top of that, then only the parts of the root element that are not covered by that opaque layer will show up as transparent. If you have a glass table and put a sheet of paper on top of it, then you don’t see through the part covered by the paper even though the table itself is transparent.
Right,
background-color
is not an inherited property (compared to for examplecolor
(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 thebackground
shorthand property then those graphics will be effectively removed. On the other hand, if you instead set justbackground-color
then parts might get opaque again because a website could be drawing even opaque backgrounds as background-image instead of background-color.