Puis-je définir une opacité uniquement pour l'image d'arrière-plan d'un div ?

Question

Disons que j'ai

<div class="myDiv">Hi there</div>

Je veux mettre un background-image et lui donner un opacity de 0.5 - mais je veux que le texte que j'ai écrit ait une opacité totale ( 1 ).

Si j'écrivais le CSS comme ceci

.myDiv { opacity:0.5 }

tout sera en faible opacité - et je ne veux pas de ça.

Ma question est donc la suivante : comment puis-je obtenir une image de fond à faible opacité avec un texte à opacité totale ?

Answer 1

Voici donc un autre moyen :

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");

Answer 2

Non, cela ne peut pas être fait puisque opacity affecte l'élément entier, y compris son contenu, et il n'y a aucun moyen de modifier ce comportement. Vous pouvez contourner ce problème à l'aide des deux méthodes suivantes.

Division secondaire

Ajouter un autre div au conteneur pour contenir l'arrière-plan. Il s'agit de la méthode la plus adaptée aux différents navigateurs et elle fonctionnera même avec IE6.

HTML

<div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

Voir test case sur jsFiddle

Pseudo-élément :before et ::before

Une autre astuce consiste à utiliser la norme CSS 2.1 :before ou CSS 3 ::before pseudo-éléments. :before est pris en charge dans IE à partir de la version 8, tandis que le pseudo-élément ::before n'est pas du tout pris en charge. Nous espérons que cela sera rectifié dans la version 10.

HTML

<div class="myDiv">
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

Notes supplémentaires

En raison du comportement de z-index vous devrez définir un z-index pour le conteneur, ainsi qu'un négatif z-index pour l'image de fond.

Cas de test

Voir le cas de test sur jsFiddle :

• Utilisation de CSS 2.1 :before
• Utilisation de CSS 3 ::before

Answer 3

Css

div { 
    width: 200px;
    height: 200px;
    display: block;
    position: relative;
}

div::after {
    content: "";
    background: url(image.jpg); 
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

html

<div> put your div content</div>

Answer 4

J'ai mis en place La solution de Marcus Ekwall mais j'ai pu supprimer quelques éléments pour le simplifier et cela fonctionne toujours. Peut-être la version 2017 de html/css ?

html :

<div id="content">
  <div id='bg'></div>
  <h2>What is Lorem Ipsum?</h2>
  <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
    book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
    desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

css :

#content {
  text-align: left;
  width: 75%;
  margin: auto;
  position: relative;
}

#bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('https://static.pexels.com/photos/6644/sea-water-ocean-waves.jpg') center center;
  opacity: .4;
  width: 100%;
  height: 100%;
}

https://jsfiddle.net/abalter/3te9fjL5/

Answer 5

Bonjour à tous, j'ai fait cela et cela a bien fonctionné.

    var canvas, ctx;

        function init() {
            canvas = document.getElementById('color');
            ctx = canvas.getContext('2d');

            ctx.save();
            ctx.fillStyle = '#bfbfbf'; //  #00843D   // 118846
            ctx.fillRect(0, 0, 490, 490);
            ctx.restore();
        }

section{
        height: 400px;
        background: url(https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;

}

canvas {
    width: 100%;
    height: 400px;
    opacity: 0.9;

}

#text {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    text-align: center;
}

.middle{
    text-align: center;

}

section small{
    background-color: #262626;
    padding: 12px;
    color: whitesmoke;
  letter-spacing: 1.5px;

}

section i{
  color: white;
  background-color: grey;
}

section h1{
  opacity: 0.8;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Metrics</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">  
</head>  

<body onload="init();">
<section>
<canvas id="color"></canvas>

<div class="w3-container middle" id="text">
<i class="material-icons w3-highway-blue" style="font-size:60px;">assessment</i>
<h1>Medimos las acciones de tus ventas y disenamos en la WEB tu Marca.</h1>
<small>Metrics &amp; WEB</small>
</div>
</section>