Resulta que en una página html y css que estoy creando, de background tengo una fotografía, pero quiero añadir sobre esa fotografía un color sólido con transparencia, digamos un 50% de opacidad, he probado colocando antes de la sección que contiene al background un div con una clase y a esta colocarle un fondo de color con 50% de opacidad, pero termina arruinando el background con fotografía y no se termina viendo ninguno de los dos, por lo que terminé quitando ese div y colocando la clase dentro de la misma sección, pero tampoco funciona. ¿Cómo podría lograr hacer lo que quiero?
Esto es lo que había hecho:
HTML
<section id="der" class="transparencia">
<h4 class="cabeceras">Hola, soy</h4>
<h1 class="cabeceras">Pedro Fumero</h1>
</section>
CSS
.transparencia {
background-color: rgba(255,0,0,0.5);
}
section#der {
background: url("../img/home.jpg");
background-repeat: no-repeat;
background-position: center;
height: 100%;
float: center;
}