CODEWITHSUNDEEP
javascripthtmlcssopacity
Dave
Dave

Reputation: 1277

adding opacity to page

I have a page with a background image and six tiles that are links, All of those are contained in a <div id = "main">. I also have a side navbar that pushes the content to the right when clicked on.
I want to also add some opacity to #main, but i am stuck.
Below is my javascript code for my Side Navbar where I am trying to change the backgroundColor, which I know is clearly wrong. Is there a way to add opacity to an entire page?

document.getElementById("myBtn").addEventListener("click", toggleNav);

function toggleNav(){
    navSize = document.getElementById("mySidenav").style.width;
    if (navSize === "400px") {
        return close();
    }
    return open();
}
function open() {
        document.getElementById("mySidenav").style.width = "400px";
        document.getElementById("main").style.marginLeft = "400px";
        document.getElementById("main").style.backgroundColor = "yellow";
}
function close() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
        document.getElementById("main").style.backgroundColor = "white";
}

Upvotes: 1

Views: 204

Answers (1)

Gaurav Gandhi
Gaurav Gandhi

Reputation: 3201

You are not totally wrong, you have to use either rgba() or Hexadecimal notation of RGBA. You can read more about it on here. You can use it in your project as, document.getElementById("main").style.background = "rgba(0,0,0,0.4)";
Above code will set background to black and opacity to 0.4.

Or if you just want to toggle the Opacity then you have to set, opacity css property, as follows

document.getElementById("main").style.opacity = 0.4
Where 0.4 is opacity value. It ranges form 0 to 1, where 1 stands for fully visible and 0 means fully hidden. You can read more on MDN

Upvotes: 1

Related Questions