在网络应用程序摄像头上覆盖透明png

Question

I am creating a web app using the mobile devices camera. Specifically a ipad mini.

I'm using the code:

So the full screen pop up with a camera, but I want to overlay a transparent image on top of the camera. So for example a sun in the top right hand corner so when the photo is taken the sun also appears in the camera.

Can anyone help me out how to add a overlay.

Thanks so much.

Answer 1

Maybe you can use this:

#IdOfImage{
    background: url('YourImageHere')
    opacity: 0.5;
    z-index: 100;
}

All the other classes / id's have to be a lower z-index to make this image pop up over all the other ones.