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.

Méthode 1 : utiliser un positionnement absolu et une image

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 :

Hello World!

Méthode 2 : utiliser des pseudo-éléments CSS

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 :