¿Hay un primer plano equivalente a la imagen de fondo en css?

Quiero agregar algo de brillo a un elemento en la página web. Preferiría no tener 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?

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 en 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 se pueden enfocar). http://jsfiddle.net/JxNdT/

#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);
  width: 200px;
  height: 200px;
  pointer-events: none;
}

<div id="cont">
  Test<br>
  <input type="text" placeholder="edit">
</div>

PS. elegí el ::before pseudo-elemento, porque eso conduce naturalmente al posicionamiento correcto. si elijo ::afterentonces 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 envolvente requiere la position:relative;display:inline-block; estilos. Selecciona el width y height del pseudo-elemento a 100%, y el pseudoelemento se extenderá al ancho y alto del elemento envolvente. Manifestación: http://jsfiddle.net/JxNdT/1/.

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 debajo de 1:

.is-hidden {
    opacity: 0.5;
}

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

Puedes usar este css

#yourImage
{
z-index: 1; 
}

NOTA

Selecciona el z-index para indexar mayor el el z-index del elemento sobre el que está poniendo la imagen.

Si no ha especificado ninguna z-index después 1 haría el trabajo.

También puede configurar z-index a -1en ese caso la imagen siempre estaría en background!

Una buena solución: box-sizing + padding-left, ver más en css-trucos

En algún lugar de tu HTML:

<img id="test_replacement" src="https://stackoverflow.com/questions/12659953/test.png" alt="test" />

El CSS para reemplazar la imagen (al pasar el mouse)

#test_replacement {
    width: 200px; //must be the size of your image (and the replacement one)
    height: 200px; //idem
    display: block;
}
#test_replacement:hover {
    box-sizing: border-box;
    background-image: url('somewhere/other_image.png');
    padding-left: 200px; //at least the size of the width
}

Utilice una posición absolutamente <img> elemento:

img {
  position: absolute;
  opacity: 0.3;
  pointer-events: none;
}

iframe {
  width: 500px;
  height: 300px;
  border: 0;
}

<img src="https://i.stack.imgur.com/rET57.jpg" alt="Foreground image">

<iframe src="https://example.com/"></iframe>