0

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

3 respuestas 3

3

Estas dandole un z-index:2 al :before, por lo que cualquier elemento que quieras que esté encima tendras que darle un z-index mayor.

Podrias ponerle unposition:relative y un z-index:3al h1 para arreglarlo, aunque yo simplificaria poniendo color, trama y opacidad en una unica imagen base64 (png o svg). Por cierto, el bottom y el right en el :before son innecesarios.

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;
	     }
        h1{
        position:relative;
        z-index:3;
        }
<!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>

6
  • hice eso y no funciono Commented el 22 feb. 2019 a las 22:41
  • No lo has hecho bien porque he copiado tu codigo en mi respuesta haciendolo y funciona
    – Montaycabe
    Commented el 23 feb. 2019 a las 1:19
  • Por cierto, no tiene nada que ver el responsive con que el elemento se superponga, no se entiende que quieres decir
    – Montaycabe
    Commented el 23 feb. 2019 a las 1:26
  • Lo que quizás no supe explicar o no expliqué es que quería superponer lo sin que en algún momento se desbordarse o tuviera problemas con los elementos Commented el 23 feb. 2019 a las 2:06
  • Razón de mas para arreglarlo con el background sin usar :before , de todas formas, si quisieras que cualquier elemento que haya dentro quede siempre encima del :before podrías hacer algo como .fondoLogin>*{ position: relative; z-index: 10} pero insisto, son soluciones un poco "ñapas" y habría que ver el contexto completo de la aplicación para dar con la solución apropiada. Si puedes arreglarlo solo con el background como te decía antes seria la solución mas limpia
    – Montaycabe
    Commented el 23 feb. 2019 a las 13:46
1

Cuando le das el z-index: 2; al before lo que haces es que su posición en el eje z sea mayor al de los otros elementos que no tengan un z-index mayor, para arreglar esto es simple le colocas un position: relative; al elemento que quieras poner por encima y después un z-index mayor como: z-index: 100;

1

Te pongo otra respuesta haciendolo sin before como me has pedido.

En .fondoLogin tienes un fondo negro, y luego le superpones un fondo rojo con trama negra con un 0.3 de opacidad, con lo que acabas teniendo un fondo rojo oscuro con una trama de rojo mas oscuro aun. ¿porque no pones de fondo en .fondoLogin simplemente una imagen de "tile" (repetible en mosaico) con esos colores y ya esta?
He hecho una captura de tu ejemplo para sacar una imagen "tileable" que sea exactamente igual y la he convertido a base64. Insisto que no se cual es el contexto de este código, si necesitas que la trama se superponga sobre distintos colores este ejemplo no te servirá (aunque puedes hacerlo de forma parecida), pero aun así si solo quieres usar un fondo, deberias usar la propiedad background, que tiene muchisimas posibilidades, como apilar varias imagenes y colores) :before es para añadir contenido, no fondos, y muy justificada tiene que ser la razón para usarlo y complicarte la vida.

html,*{
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
}

.fondoLogin{
		max-width: 100%;
		max-height: 100%;
	    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFBAMAAAB/QTvWAAAAA3NCSVQICAjb4U/gAAAAD1BMVEWzAADHFBW4BQXRHh+6BwhJOJcxAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADAyLzI0LzE5HCe7mwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAYSURBVAiZY2BgcWBgYBZgAAFnIFZkYAAAB84AvDJt6u8AAAAASUVORK5CYII=')

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

2
  • donde puedo hacer lo de la imagen de base64 Commented el 25 feb. 2019 a las 17:04
  • busca por internet: image to base64 y te saldran muchos sitios donde hacerlo, solo es conveniente si las imagenes son pequeñas, sino te saldra un chorro de codigo demasiado grande
    – Montaycabe
    Commented el 25 feb. 2019 a las 19:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.