web-dev-qa-db-fra.com

Opacité du fond CSS

J'utilise quelque chose de similaire au code suivant:

<div style="opacity:0.4; background-image:url(...);">
    <div style="opacity:1.0;">
        Text
    </div>
</div>

Je m'attendais à ce que le fond ait une opacité de 0,4 et le texte une opacité de 100%. Au lieu de cela, ils ont tous deux une opacité de 0,4.

htmlcssopacity
619
John Wheal

Les enfants héritent de l'opacité. Ce serait bizarre et peu pratique s'ils ne le faisaient pas.

Vous pouvez utiliser un fichier PNG translucide pour votre image d'arrière-plan ou utiliser une couleur RGBa (un pour alpha) pour votre couleur d'arrière-plan.

Exemple, fond noir délavé à 50%:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>
1071
AlienWebguy

Vous pouvez utiliser CSS 3 :before pour obtenir un arrière-plan semi-transparent. Vous pouvez le faire avec un seul conteneur. Utilisez quelque chose comme ça

<article>
  Text.
</article>

Puis appliquez du CSS

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

Exemple: http://codepen.io/anon/pen/avdsi

Remarque: Vous devrez peut-être ajuster les valeurs z-index.

164
daniels

Les méthodes suivantes peuvent être utilisées pour résoudre votre problème:

  1. Méthode de transparence CSS alpha (ne fonctionne pas dans Internet Explorer 8):

    #div{background-color:rgba(255,0,0,0.5);}

  2. Utilisez une image PNG transparente selon votre choix comme arrière-plan.

  3. Utilisez l'extrait de code CSS suivant pour créer un arrière-plan transparent à l'alpha sur plusieurs navigateurs. Voici un exemple avec #000000 @ 0.4% d'opacité

    .div {
    background:rgb(0,0,0);
    background: transparent\9;
    background:rgba(0,0,0,0.4);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
    zoom: 1;
}
.div:nth-child(n) {
    filter: none;
}

Pour plus de détails sur cette technique, voir this , qui possède un générateur de CSS en ligne.

43
Achyuth Ajoy

Je ferais quelque chose comme ça

<div class="container">
  <div class="text">
    <p>text yay!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

Ça devrait marcher. En supposant que vous deviez avoir une image semi-transparente BTW, et non une couleur (pour laquelle vous devriez simplement utiliser rgba). On suppose également que vous ne pouvez pas simplement modifier l'opacité de l'image au préalable dans Photoshop.

29
Peter Lada

Vous pouvez utiliser Sass 'transparentize.

Je l'ai trouvé le plus utile et le plus simple à utiliser.

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)

Voir plus: # transparentize ($ color, $ montant) ⇒ Sass :: Script :: Value :: Color

8
ilan weissberg
.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
7
Wael Wafik

Cela est dû au fait que la div interne a 100% de l'opacité de la div dans laquelle elle est imbriquée (qui a une opacité de 40%).

Pour le contourner, vous pouvez faire certaines choses.

Vous pouvez créer deux divs séparés comme ceci:

<div id="background"></div>
<div id="bContent"></div>

Définissez l'opacité CSS souhaitée et d'autres propriétés pour l'arrière-plan et utilisez la propriété z-index ( z-index ) pour styler et positionner la div bContent. Avec cela, vous pouvez placer l’empiètement div de la division d’arrière-plan sans pour autant que son opacité soit gâchée.

Une autre option consiste à RGBa . Cela vous permettra d'imbriquer vos divs tout en conservant une opacité spécifique à chaque div.

La dernière option consiste simplement à créer une image .png semi-transparente de la couleur de votre choix dans l'éditeur de votre choix, à définir la propriété background-image sur l'URL de l'image. avec le CSS et perdre la capacité et l'organisation d'une structure div imbriquée.

3
zillaofthegods

Assurez-vous simplement que la largeur et la hauteur de l'avant-plan soient identiques à celles de l'arrière-plan, ou essayez d'avoir les propriétés haut, bas, gauche et droite.

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>
2
Niño Angelo Orlanes Lapura