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?
Respuesta
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
- 1. ¿Hay un css equivalente a 'align = "center"'?
- 2. Primer plano transparente
- 3. ¿Cómo devolver un proceso de fondo huérfano a primer plano?
- 4. Linux: ejecutar cron job en primer plano
- 5. TabWidget color blanco en primer plano?
- 6. Progressbar color de primer plano
- 7. ¿Hay un equivalente a Groovy en C#?
- 8. ¿Hay un equivalente a typedef en C#?
- 9. ¿Hay un equivalente a DBus en OSX?
- 10. ¿Hay un equivalente a memcpy() en Java?
- 11. ¿Hay un equivalente a SuppressWarnings en Scala?
- 12. AppleScript para apuntar aplicación en primer plano
- 13. Cómo crear una tarea en primer plano?
- 14. Java, ejecute otra aplicación en primer plano
- 15. Android: Servicio de primer plano frente a wakeLock
- 16. hilos primer plano vs subprocesos de fondo
- 17. ¿Hay un WPF equivalente a un explorador DOM?
- 18. ¿Hay un WPF equivalente a System.Windows.Forms.Screen?
- 19. ¿Hay un Java equivalente a libevent?
- 20. TCPDF autopagebreak + backgroundimage
- 21. ¿Hay un C++ equivalente a getcwd?
- 22. ¿Hay un entero equivalente a __toString()
- 23. ¿Hay un equivalente a php.net para JavaScript?
- 24. ¿Hay un Java equivalente a MISRA C?
- 25. ¿Hay un equivalente a HLint para Erlang?
- 26. ¿Hay un C# equivalente a IsDebuggerPresent()?
- 27. ¿Hay un equivalente de ucwords en java
- 28. Detectar evento de primer plano de aplicación
- 29. ¿Cómo traer un primer plano de ventana usando C#?
- 30. ¿Hay un equivalente a 'continuar' en un Parallel.ForEach?
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