Is there a way to do this with user CSS on Firefox?

The content has to have full opacity. So setting opacity through the compositor or the opacity CSS property does not count.

  • MrOtherGuy@lemmy.world
    0·
    2 days ago

    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.

    • Quail4789@lemmy.mlOPEnglish
      0·
      2 days ago

      You’re right about the background. That was me going catch-all while testing. I’ll set background-color only for a while and observe how that works.

      I assumed background-color would be inherited when marked !important since I haven’t seen that noted anywhere on MDN or similar.