Voglio aggiungere un po 'di lucentezza a un elemento sulla pagina web. Preferirei se non dovessi aggiungere altro html alla pagina. Voglio che l'immagine appaia davanti all'elemento piuttosto che dietro. Qual'è il miglior modo per farlo?Esiste un primo piano equivalente all'immagine di sfondo in css?
per ottenere una "immagine in primo piano" senza codice HTML in più, è possibile utilizzare un pseudo-elemento (::before/:before) più il CSS pointer-events. L'ultima proprietà è necessaria in modo che l'utente possa effettivamente fare clic sul livello "come se non esistesse".
Ecco un esempio (utilizzando un colore cui canale alfa è del 50% in modo che si può vedere che gli elementi reali possono effettivamente essere concentrate): 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. Ho scelto lo pseudoelemento ::before, perché questo naturalmente porta al posizionamento corretto. Se seleziono ::after, devo aggiungere position:relative; all'elemento reale() e top:0;left:0; allo pseudoelemento (::after).
PPS. Per ottenere l'effetto di primo piano su elementi senza dimensione fissa, è necessario un elemento aggiuntivo. Questo elemento wrapper richiede gli stili position:relative;display:inline-block;. Impostare width e height dello pseudo-elemento su 100% e lo pseudoelemento si estenderà alla larghezza e all'altezza dell'elemento wrapper. Dimostrazione: http://jsfiddle.net/JxNdT/1/.
grandi cose!Poiché l'immagine ha già una trasparenza alfa, non ho bisogno dell'elemento background, ma a parte il fatto che copro solo pasta! – Himmators
Solo curioso, c'è una soluzione simile se la dimensione dell'elemento non è statica? – Himmators
@KristofferNolgren Hai bisogno di un wrapper che abbia 'position: relativo;' (e 'display: inline-block;'), quindi usa '100%' per 'width' e' height' sullo pseudo-elemento. Lo pseudo-elemento si estenderà alla larghezza e all'altezza dell'elemento wrapper. Demo: http://jsfiddle.net/JxNdT/1/ –
È possibile utilizzare questo css
#yourImage
{
z-index: 1;
}
NOTA
Impostare la z-index all'indice maggiore è la la z-index dell'elemento su cui si sta mettendo l'immagine.
Se non è stato specificato alcun z-index, allora lo 1 farebbe il lavoro.
È inoltre possibile impostare z-index su -1, in tal caso l'immagine sarà sempre a background!
La proprietà 'z-index' funziona solo sugli elementi posizionati (' absolute', 'relative' o' fixed'). – gearsdigital
Se avete bisogno di un bianco-trasparente primo piano
Questo è per i futuri visitatori come me che stanno prendendo in considerazione l'aggiunta di un primo piano bianco-trasparente ad un elemento per comunicare che è nascosto/disabilitato per esempio. Spesso è possibile raggiungere il tuo obiettivo, semplicemente abbassando il opacity di sotto di 1:
.is-hidden {
opacity: 0.5;
}visible
<span class="is-hidden">hidden</span>
visible
sono le dimensioni dell'elemento fisso? –
Sì, lo sono. Altri risultati per permettermi di commentare. – Himmators
Sto provando a farlo funzionare con:: dopo l'elemento psuedo ora ... – Himmators