web-dev-qa-db-fra.com

Existe-t-il un premier plan équivalent à background-image dans css?

Je veux ajouter de l'éclat à un élément de la page Web. Je préférerais que je n'aie pas à ajouter du HTML supplémentaire à la page. Je veux que l'image apparaisse devant l'élément plutôt que derrière. Quelle est la meilleure façon de procéder?

htmlcsscss3foreground
44
Himmators

Pour obtenir une "image de premier plan" sans code HTML supplémentaire, vous pouvez utiliser un pseudo-élément (::before/:before) plus le CSS pointer-events. La dernière propriété est nécessaire pour que l'utilisateur puisse réellement cliquer sur la couche "comme si elle n'existait pas".

Voici un exemple (en utilisant une couleur dont le canal alpha est de 50% pour que vous puissiez voir que les éléments réels peuvent réellement être focalisés): 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. J'ai choisi le ::before pseudo-élément, car cela conduit naturellement au bon positionnement. Si je choisis ::after, alors je dois ajouter position:relative; à l'élément réel (#cont), et top:0;left:0; au pseudo-élément (::after).

PPS. Pour obtenir l'effet de premier plan sur les éléments sans taille fixe , un élément supplémentaire est nécessaire. Cet élément wrapper nécessite le position:relative;display:inline-block; modes. Définissez width et height du pseudo-élément sur 100%, et le pseudo-élément s'étendra à la largeur et à la hauteur de l'élément wrapper. Démo: http://jsfiddle.net/JxNdT/1/ .

67
Rob W

Vous pouvez utiliser ce css

#yourImage
{
z-index: 1; 
}

NOTE

Met le z-index pour indexer plus le z-index de l'élément sur lequel vous placez l'image.

Si vous n'avez spécifié aucun z-index puis 1 ferait le travail.

Vous pouvez également définir z-index à -1, dans ce cas, l'image serait toujours à background!

1
Anirudha

Si vous avez besoin d'un premier plan transparent blanc

C'est pour les futurs visiteurs comme moi qui envisagent d'ajouter un premier plan transparent blanc à un élément pour communiquer qu'il est caché/désactivé par exemple. Vous pouvez souvent atteindre votre objectif en abaissant simplement le opacity en dessous de 1:

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