Opacité de fond CSS [dupliquer]

cette question a déjà une réponse ici:

j'utilise quelque chose qui ressemble au code suivant:

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

je m'attendais à ce que l'arrière-plan ont un l'opacité de 0.4 et le texte, d'avoir 100% d'opacité. Au lieu de cela ils ont tous les deux une opacité de 0.4.

545
demandé sur John Wheal 2012-05-03 03:05:00
la source

8 ответов

les enfants héritent de l'opacité. Ce serait bizarre et gênant s'ils ne le faisaient pas.

vous pouvez utiliser un png translucide pour votre image de fond, ou utiliser une couleur RGBa (a pour alpha) pour votre couleur de fond.

exemple, fond noir décoloré à 50%:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>
952
répondu AlienWebguy 2017-12-21 04:05:55
la source

vous pouvez utiliser CSS 3 :before pour avoir un fond semi-transparent et vous pouvez le faire avec un seul conteneur. Utilisez quelque chose comme ceci

<article>
  Text.
</article>

puis appliquer quelques 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);
}

échantillon: http://codepen.io/anon/pen/avdsi

Note: vous pourriez avoir besoin d'ajuster les valeurs z-index .

137
répondu daniels 2016-02-07 21:14:24
la source

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

  1. CSS Aplha Méthode par Transparence (ne fonctionne pas sous IE 8)

    #div{background-color:rgba(255,0,0,0.5);}
    
  2. utilisez une image png transparente selon votre choix comme fond.

  3. utilisez l'extrait de code css suivant pour créer un fond alpha-transparent de navigateur croisé. Voici un exemple avec #000000 @ 0.4% opacité

    .div {  
        background:rgb(0,0,0);  
        background: transparent;  
        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 ce , qui a un générateur css en ligne.

39
répondu Achyuth Ajoy 2014-03-16 10:20:55
la source

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;
}

devrait marcher. C'est en supposant que vous êtes tenus d'avoir une image semi-transparente btw, et non une couleur (que vous devriez utiliser rgba). On suppose aussi que l'on ne peut pas modifier l'opacité de l'image à l'avance dans photoshop.

24
répondu Peter Lada 2016-09-30 00:25:43
la source
.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)";}
6
répondu Wael Wafik 2014-03-16 10:08:45
la source

vous pouvez utiliser sass transparentize , je l'ai trouvé pour être le plus utile et simple de l'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: http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method

4
répondu ilan weissberg 2017-01-12 15:29:23
la source

C'est parce que l'intérieur de la div à 100% de l'opacité de la div c'est imbriquée (qui a 40% d'opacité).

pour la contourner, il y a quelques choses que vous pourriez faire.

vous pouvez créer deux divs séparés comme cela:

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

définissez votre opacité CSS désirée et d'autres propriétés pour l'arrière-plan hte et utilisez la propriété z-index ( z-index ) pour styliser et positionner le bContent div. Avec cela, vous pouvez placer le div overtope de la div de fond sans avoir son opacité mucked avec.


une autre option est de RGBa . Cela vous permettra d'emboîter vos divs et d'atteindre tout de même l'opacité spécifique de div.


la dernière option est de simplement faire un semi transparent .png image de la couleur que vous voulez dans votre éditeur d'image désiré de choix, propriété background-image à l'url de l'image, puis vous n'aurez pas à vous soucier de coucher avec le css et de perdre la capacité et l'organisation d'un imbriquée div structure.

3
répondu zillaofthegods 2012-05-03 03:14:06
la source

il suffit de s'assurer de mettre la largeur et la hauteur pour le premier plan le même avec l'arrière-plan, ou essayer d'avoir des 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
répondu Niño Angelo Orlanes Lapura 2016-07-26 02:57:22
la source

Autres questions sur html css opacity