Question Opacité de fond CSS [dupliquer]


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

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 l'arrière-plan ait une opacité de 0.4 et que le texte ait 100% d'opacité. Au lieu de cela, ils ont tous les deux une opacité de 0.4.


522
2018-05-02 23:05


origine


Réponses:


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 d'arrière-plan ou utiliser une couleur RGBa (a pour alpha) pour votre couleur d'arrière-plan.

Exemple, 50% de fond noir décoloré:

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


927
2018-05-02 23:07



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

<article>
  Text.
</article>

Ensuite, appliquez un peu de 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

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


128
2017-09-24 15:26



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

  1. Méthode de transparence CSS Aplha (ne fonctionne pas dans IE 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 ci-dessous pour créer un arrière-plan transparent pour plusieurs pages. 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 concernant cette technique, voir ce, qui a un générateur de CSS en ligne.


38
2017-09-24 16:06



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 supposer que vous devez avoir une image semi-transparente btw, et pas une couleur (que vous devriez utiliser rgba pour). Aussi supposé est que vous ne pouvez pas simplement modifier l'opacité de l'image à l'avance dans Photoshop.


23
2018-05-02 23:28



.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
2018-03-16 06:08



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: http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method


4
2018-03-21 12:53



C'est parce que le div interne a 100% de l'opacité du div où il est imbriqué (qui a 40% d'opacité).

Pour le contourner, il y a quelques choses que vous pourriez faire.

vous pourriez créer deux divs distincts comme ça:

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

définissez l'opacité css et les autres propriétés souhaitées pour l'arrière-plan hte et utilisez la propriété z-index (z-index) pour styliser et positionner la div bContent. Avec cela, vous pouvez placer l'overtope div de l'arrière-plan div sans avoir l'opacité mucked avec.


Une autre option est de RGBa. Cela vous permettra d'imbriquer vos divs tout en obtenant une opacité spécifique à div.


La dernière option consiste simplement à faire une image .png semi-transparente de la couleur que vous voulez dans l'éditeur d'image de votre choix, à définir la propriété background-image sur l'url de l'image et vous n'aurez plus à vous soucier de avec le CSS et perdre la capacité et l'organisation d'une structure div imbriquée.


3
2018-05-02 23:14