• 11 Posts
  • 117 Comments
Joined 8 months ago
cake
Cake day: September 15th, 2024

help-circle



  • 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;
    }
    

  • I think the problem comes from !important not working as expected for me. Your html:root doesn’t work on my setup because most websites set background on body and that somehow overrides html:root despite the !important. Similarly, if I set it in the body, background or background-color set in lower levels still override my usercontent (again, despite me using !important). That’s causing the webpage to have some transparent bits but a lot of elements will have regular opaque backgrounds. Any ideas?

    PS I don’t have anything else in userContent.css or any extension that’s setting CSS rules.





  • So, I’ve Googled my way to a very simple example to test how this’d work. However, the example below basically doesn’t have any effect. (Setting pixColor[1] = 1.0; makes everything green so the shader is loaded correctly).

    precision highp float;
    varying vec2 v_texcoord;
    uniform sampler2D tex;
    
    void main() {
    	// get the pixel color
           vec4 pixColor = texture2D(tex, v_texcoord);
    
    	// change the alpha
    	pixColor[3] = 0.75;
    
    	// set the pixel color
    	gl_FragColor = pixColor;
    }
    

    Since I don’t know anything about shaders, before I open an issue on Hyprland, is this how you’d set the alpha of each pixel on a screen?

    I suspect this might not be possible in Hyprland after all as it doesn’t natively support per-window shaders. IIUC, Hyprland applies the shader after it composits so there’s technically nothing behind the window I’m trying to make transparent.