Quiero agregar un poco de brillo a un elemento en la página web. Preferiría si no tuviera 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?¿Hay un primer plano equivalente a background-image en css?
para lograr un "primer plano de imagen" sin código HTML adicional, se puede utilizar un pseudo-elemento (::before/:before) más el CSS pointer-events. La última propiedad es necesaria para que el usuario pueda hacer clic en la capa "como si no existiera".
He aquí un ejemplo (utilizando un color cuyo canal alfa es de 50%, por lo que se puede ver que los elementos reales en realidad se pueden enfocar): 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. Escogí el pseudo-elemento ::before, porque eso naturalmente conduce a la posición correcta. Si selecciono ::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 contenedor requiere los estilos position:relative;display:inline-block;. Establezca width y height del pseudo-elemento en 100%, y el pseudo-elemento se extenderá al ancho y alto del elemento contenedora. Demostración: http://jsfiddle.net/JxNdT/1/.
¡cosas geniales!Como la imagen ya tiene transparencia alfa, no necesitaré el elemento de fondo, ¡pero aparte de eso solo copiaré pegar! – Himmators
Simplemente curioso, ¿hay una solución similar si el tamaño del elemento no es estático? – Himmators
@KristofferNolgren Necesita una envoltura que tenga 'position: relative;' (y 'display: inline-block;'), luego use '100%' para 'width' y' height' en el pseudo-elemento. El pseudo-elemento se extenderá al ancho y alto del elemento contenedor. Demostración: http://jsfiddle.net/JxNdT/1/ –
Puede utilizar este CSS
#yourImage
{
z-index: 1;
}
NOTA
Ajuste el z-index al índice mayor es la del z-index del elemento sobre el que se está poniendo la imagen.
Si no ha especificado ningún z-index entonces 1 haría el trabajo.
También puede establecer z-index en -1, en ese caso la imagen siempre estará en background!
La propiedad 'z-index' solo funciona en elementos posicionados (' absolute', 'relative' o' fixed'). – gearsdigital
Si necesita un blanco transparente primer plano
Esto es para futuros visitantes como yo que están considerando la adición de un primer plano de color blanco transparente a un elemento para comunicar que está escondido/desactivada por ejemplo. A menudo se puede lograr su objetivo simplemente bajando el opacity por debajo de 1:
.is-hidden {
opacity: 0.5;
}visible
<span class="is-hidden">hidden</span>
visible
son las dimensiones del elemento fijo? –
Sí lo son. Más charcters para permitirme comentar. – Himmators
Estoy tratando de hacerlo funcionar con: después del elemento psuedo ahora ... – Himmators