Ask coding questions

← Back to all posts
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?

Commentshotnewtop
eankeen (614)

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 :)