Même si avec CSS et CSS3 vous pouvez faire un grand nombre de choses, ils ne vous permettent pas de configurer une opacité sur un arrière-plan CSS. Cependant, en faisant preuve de créativité, il existe une tonne de solutions originales qui donneront l’impression que l’opacité de l’image d’arrière-plan CSS a été modifiée. Ces deux méthodes suivantes intègrent une excellente prise en charge des navigateurs, Internet Explorer 8 inclus.
Cette méthode porte parfaitement son nom. Il vous suffit, tout simplement, d’utiliser le positionnement absolu sur une balise img
normale pour donner l’impression d’avoir utilisé la propriété background-image
de CSS. Tout ce que vous avez à faire, c’est de positionner l’image à l’intérieur d’un conteneur position: relative;
. Voici à quoi ressemble généralement le balisage HTML :
<div class="demo_wrap">
<h1>Hello World!</h1>
<img src="https://assets.digitalocean.com/labs/images/community_bg.png" />
</div>
Et voici à quoi ressemblera votre CSS :
.demo_wrap {
position: relative;
overflow: hidden;
padding: 16px;
border: 1px dashed green;
}
.demo_wrap h1 {
padding: 100px;
position: relative;
z-index: 2;
}
.demo_wrap img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.6;
}
Ici, l’astuce est de positionner l’img de manière absolue et de l’étirer jusqu’à remplir l’intégralité du conteneur parent. Et de positionner relatively tout le reste de façon à pouvoir configurer un z-index
qui le positionnera au-dessus de l’img.
Voici une démo en direct :
Une fois que vous saurez comment ça marche, cette méthode est relativement simple à comprendre. Il s’agit sans nul doute de la méthode que je préfère. En utilisant les pseudo-éléments CSS :before
ou :after
, vous obtenez un div avec une image d’arrière-plan et configurez une opacité au-dessus. Voici à quoi devrait ressembler votre balisage HTML :
<div class="demo_wrap">
<h1>Hello World!</h1>
</div>
Et voici à quoi ressemble le CSS :
.demo_wrap {
position: relative;
background: #5C97FF;
overflow: hidden;
}
.demo_wrap h1 {
padding: 50px;
position: relative;
z-index: 2;
}
/* You could use :after - it doesn't really matter */
.demo_wrap:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
Ici, nous devons à nouveau déplacer le z-index de contenu (dans le cas présent, le <h1>
) au-dessus du pseudo-élément de l’arrière-plan et explicitement configurer la position: absolute;
et le z-index: 1
sur le pseudo-élément :before
.
Les autres attributs du pseudo-élément sont là pour le positionner de manière à chevaucher à 100 % le parent. Ils peuvent également utiliser une nouvelle propriété CSS intelligente : background-size: cover
qui dimensionne l’arrière-plan de manière à couvrir l’élément sans en changer les proportions. Voici une belle petite démo de cette méthode :
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up