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?

<section id="slider" class="slider-parallax full-screen clearfix">
	<div class="swiper-slide dark" style="background-image: url('/assets/uploads/library/hero.jpg');">
		<div class="container clearfix">
			<div class="slider-caption slider-caption-center">
				<h2 data-caption-animate="fadeInUp">Lorem ipsum</h2>
				<p data-caption-animate="fadeInUp" data-caption-delay="200">Lorem ipsum dolor sit.</p>
			</div>
		</div>
	</div>

	<a href="#" data-scrollto="#content" data-offset="100" class="dark one-page-arrow"><i class="icon-angle-down infinite animated fadeIn"></i></a>

</section>

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