Estoy realizando un Sistema Web responsivo, en el cual tenemos un fondo con transparencia y textura, sobre el cual se quiere agregar elementos que no queden por debajo de la transparencia.
Ejemplo
html,*{
margin:0;
padding:0;
width: 100%;
height: 100%;
}
.fondoLogin{
max-width: 100%;
max-height: 100%;
background-color: red;
}
.fondoLogin:before{
content: "";
background-color: #000000;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23868489' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inicio de Sesión</title>
<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
</head>
<body>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 fondoLogin">
<h1>Ejemplo</h1>
</div>
<script src="js/jsBootstrap/bootstrap.js"></script>
<script src="js/jQuery/jquery-3.3.1.js"></script>
<script src="js/consultas/procGenerales.js"></script>
<script src="js/consultas/login.js"></script>
</body>
</html>
lo que deseo es que el texto Ejemplo este por encima de la transparencia y de esta manera poder trabajar de manera responsiva