Is it possible to dynamically edit images with JavaScript/CSS so that their backgrounds become transparent?

Question

Summary: I have multiple drawings scanned as black and white and saved as png. I want to layer the drawing images in a web page so that the bottom layers are visible underneath the upper layers. Is it possible to dynamically modify the pngs with JavaScript/CSS so that the png backgrounds become transparent?

Why: I am taking up traditional animation. So far the only open source software I know that can superimpose image layers is pencil. However, its frame editor is hard to use. I imagine a solution involving JavaScript and the frame sequence written in csv is possible (and probably easier!).

Answer 1

There are two ways I would do it:

CSS way: element{ opacity: 0.5 }

JS way:

function transparent(){

var img = document.getElementById('id');
img.style.opacity = "0.5";

};
transparent();