Domanda Esiste un primo piano equivalente all'immagine di sfondo in css?


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?


37
2017-09-30 08:50


origine


risposte:


Per ottenere un'immagine "in primo piano" senza codice HTML extra, puoi usare uno 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 (usando un colore il cui canale alfa è al 50% in modo che tu possa vedere che gli elementi reali possono effettivamente essere focalizzati): 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 il ::before pseudo-elemento, perché ciò porta naturalmente al corretto posizionamento. Se scelgo ::after, quindi devo aggiungere position:relative; all'elemento reale (#cont), e top:0;left:0; allo pseudo-elemento (::after).


PPS. Prendere il effetto in primo piano su elementi senza dimensione fissa, è necessario un elemento aggiuntivo. Questo elemento wrapper richiede il position:relative;display:inline-block; stili. Impostare il width e height dello pseudo-elemento a 100%e lo pseudo-elemento si estenderà alla larghezza e all'altezza dell'elemento wrapper. demo: http://jsfiddle.net/JxNdT/1/.


63
2017-09-30 09:15



Puoi usare questo css

#yourImage
{
z-index: 1; 
}

NOTA

Impostare il z-index per indicizzare maggiore il z-index dell'elemento su cui stai mettendo l'immagine.

Se non ne hai specificato nessuno z-index poi 1 farebbe il lavoro

Puoi anche impostare z-index a -1, in quel caso l'immagine sarebbe sempre a background!


0
2017-09-30 08:53



Se hai bisogno di un primo piano bianco-trasparente

Questo è per i futuri visitatori come me che stanno pensando di aggiungere un primo piano bianco-trasparente ad un elemento per comunicare che è nascosto / disabilitato per esempio. Spesso puoi raggiungere il tuo obiettivo semplicemente abbassando il opacity sotto 1:

.is-hidden {
    opacity: 0.5;
}
visible
<span class="is-hidden">hidden</span>
visible


0
2017-09-27 12:51