How to make a translucent background without transparent color values.
GavHern (64)

On my website, I have a transparent color for my navigation bar background.

Recently, I discovered the backdrop-filer css rule and wanted to add a backdrop blur to my website. This works in all supported browsers except for Google Chrome. The navigation bar starts glitching out when you use a transparent color value. Is there any way I can make the color of the navigation bar black and change the opacity of just the div and not the text inside of it?

You are viewing a single comment. View All
eankeen (605)

hey!

one workaround is creating a wrapper div around the elements in your navbar, and absolutely positioning its children.

for example, the following structure

<div id="wrapper">
    <div id="transparent-black"></div>
    <div id="navigation-bar">
        <h1>music></h1>
        <h1>projects</h1>
    </div>
</div>

could be styled similar to the following

#wrapper {
    position: relative;
    width: 100%;
    height: 50px;
}

#transparent-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;    
    opacity: 0.5;
}

#navigation-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

doing it this way will prevent the opacity from cascading down to your h1 elements because the opacity will be applied to #transparent-block, which is not a parent element of your h1 elements

hope i helped :)