¿Hay un primer plano equivalente a la imagen de fondo en css?
Quiero añadir algo de brillo a un elemento en la página web. Preferiría si no tengo que agregar html adicional a la página. Quiero que la imagen aparezca delante del elemento en lugar de detrás. ¿Cuál es la mejor manera de hacer esto?
3 answers
Para lograr una "imagen en primer plano" sin código HTML adicional, puede usar un pseudo-elemento (::before / :before) más el CSS pointer-events. La última propiedad es necesaria para que el usuario pueda hacer clic a través de la capa "como si no existiera".
Aquí hay un ejemplo (usando un color cuyo canal alfa es del 50% para que pueda ver que los elementos reales realmente pueden enfocarse): http://jsfiddle.net/JxNdT /
<div id="cont">
Test<br>
<input type="text" placeholder="edit">
</div>
#cont {
width: 200px;
height: 200px;
border: 1px solid #aaa; /*To show the boundaries of the element*/
}
#cont:before {
position: absolute;
content: '';
background: rgba(0,0,0, 0.5); /*partially transparent image*/
width: 200px;
height: 200px;
pointer-events: none;
}
PS. Elegí el ::before pseudo-elemento, porque eso conduce naturalmente al posicionamiento correcto. Si escojo ::after, entonces tengo que agregar position:relative; al elemento real (#cont), y top:0;left:0; al pseudo-elemento (::after).
PPS. Para obtener el efecto de primer plano en elementos sin un tamaño fijo, se necesita un elemento adicional. Este elemento wrapper requiere los estilos position:relative;display:inline-block;. Establecer el width y height del pseudo-elemento a 100%, y el pseudo-elemento se extenderá a la anchura y altura de la elemento de envoltura. Demo: http://jsfiddle.net/JxNdT/1/.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-30 09:41:35
Puedes usar este css
#yourImage
{
z-index: 1;
}
NOTA
Establece el z-index como índice mayor que el z-index del elemento sobre el que estás poniendo la imagen.
Si no ha especificado ningún z-index entonces 1 haría el trabajo.
También puede establecer z-index a -1, en ese caso la imagen siempre estaría en background!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-09-30 08:58:19
Si necesita un primer plano blanco-transparente
Esto es para futuros visitantes como yo que están considerando agregar un primer plano blanco-transparente a un elemento para comunicar que está oculto / deshabilitado, por ejemplo. A menudo puede lograr su objetivo simplemente bajando el opacity por debajo de 1:
.is-hidden {
opacity: 0.5;
}visible
<span class="is-hidden">hidden</span>
visibleWarning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-27 12:51:16