Dave Dave - 2 months ago 17
CSS Question

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
JS
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";
}

Answer

You are not totally wrong, you have to use either rgba() or Hexadecimal notation of RGBA. You can read more about it on here.

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

document.getElementById("content").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