overlay fullscreen hero/slider with partial opacity color

I'm using the following code to display a fullscreen hero image (sometimes will also be individual slides for a slideshow, but this code is just a single background image). Rather than having to edit the actual image, I would like to have a fullscreen overlay color where I can set the opacity in order to have white text display well. Is there a way (i.e. html/css code) built into Canvas to accomplish this?

	
		
			
				Lorem ipsum
				
Lorem ipsum dolor sit.

			
		
	

	[](#)

I tried using the following css, but it didn't work:

#slider > div:after { 
	position:absolute;
    content:'';
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.5);
    z-index:-1;
}