html - zona - ¿Hay un primer plano equivalente a background-image en css?

zonas erogenas definicion

Question

Quiero agregar algo 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?

Answer 1

Si necesitas 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 la opacity por debajo de 1:

.is-hidden {
    opacity: 0.5;
}

visible
<span class="is-hidden">hidden</span>
visible

Answer 2

Puedes usar este CSS

#yourImage
{
z-index: 1; 
}

NOTA

Establezca el z-index para indexar mayor el índice z-index del elemento sobre el que está colocando la imagen.

Si no ha especificado ningún z-index 1 haría el trabajo.

También puede establecer z-index en -1 , en ese caso la imagen siempre estará en background .

Answer 3

Para lograr una "imagen de primer plano" sin código HTML adicional, puede usar un pseudo-elemento ( ::before / :before ) más los pointer-events CSS . La última propiedad es necesaria para que el usuario pueda hacer clic en la capa "como si no existiera".

Aquí hay un ejemplo (usando un color cuyo canal alfa es 50% para que pueda ver que los elementos reales 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;
}
​

PD. Escogí el ::before pseudo-elemento anterior, porque eso naturalmente conduce al posicionamiento correcto. 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 los elementos sin un tamaño fijo , se necesita un elemento adicional. Este elemento contenedor requiere la position:relative;display:inline-block; estilos. Establezca el width y la height del pseudo-elemento al 100% , y el pseudo-elemento se extenderá al ancho y alto del elemento contenedor. Demostración: http://jsfiddle.net/JxNdT/1/ .