Comment créer un arrière-plan semi-transparent?

J'ai besoin de rendre un fond blanc transparent à 50% sans rien affecter d'autre. Comment fait-on ça?

Utilisez rgba():

.transparent {
  background-color: rgba(255,255,255,0.5);
}

Cela vous donnera une opacité de 50% tandis que le contenu de la boîte continuera à avoir une opacité de 100%.

Si vous utilisez opacity:0.5, le contenu sera fané ainsi que l'arrière-plan. Ne l'utilisez donc pas.

Cela fonctionne, mais tous les enfants de l'élément avec cette classe deviendront également transparents, sans aucun moyen de l'empêcher.

.css-class-name {
    opacity:0.8;
}

Si vous voulez que l'arrière-plan transparent soit gris, veuillez essayer:

   .transparent{
       background:rgba(1,1,1,0.5);
   }

Bon à savoir

Certains navigateurs Web ont des difficultés à rendre du texte avec des ombres sur un arrière-plan transparent. Ensuite, vous pouvez utiliser une image PNG 1x1 semi-transparente comme arrière-plan.

Remarque

N'oubliez pas que IE6 ne prend pas en charge les fichiers PNG.

N'utilisez PAS de PNG semi-transparent 1x1. Dimensionner le PNG jusqu'à 10x10, 100x100, etc. Tout ce qui a du sens sur votre page. (J'ai utilisé un PNG de 200x200 et il ne faisait que 0,25 ko, donc il n'y a pas vraiment de souci concernant la taille du fichier ici.)

Après avoir visité cet article, j'ai créé ma page Web avec 3 PNG 1x1 avec une transparence variable.

Dreamweaver CS5 était en train de tanker. J'avais des flash back sur DOS !!! Apparemment, chaque fois que j'essayais de faire défiler, d'insérer du texte, de faire quoi que ce soit, DW essayait de recharger les zones semi-transparentes 1x1 pixel à la fois ... YIKES!

Le support technique d'Adobe ne savait même pas quel était le problème, mais m'a dit de reconstruire le fichier (cela fonctionnait sur leurs systèmes, d'ailleurs). Ce n'est que lorsque j'ai chargé le premier PNG transparent dans le fichier css que le document a plongé à nouveau.

Ensuite, j'ai trouvé un article sur un autre site d'aide sur le crash de Dreamweaver en PNG. Dimensionner votre PNG; il n'y a aucun inconvénient à le faire.

Bien que datée, aucune réponse sur ce fil ne peut être utilisée universellement. Utiliser rgba pour créer des masques de couleur transparents - cela n'explique pas exactement comment le faire avec des images d'arrière-plan.

Ma solution fonctionne pour les images d'arrière-plan ou les arrière-plans en couleur.

#parent {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 50%;
    margin: 20px auto;
    width: 125px;
    height: 125px;
    background-color: #476172;
    background-image: url('https://unsplash.it/200/300/?random');
    line-height: 29px;
    text-align:center;
}

#content {
    color: white;
    height: 125px !important;
    width: 125px !important;
    display: table-cell;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(0,0,0, .3);
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

div.main{
     width:100%;
     height:550px;
     background: url('https://images.unsplash.com/photo-1503135935062-
     b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
     background-position:center;
     background-size:cover 
}
 div.main>div{
     width:100px;
     height:320px;
     background:transparent;
     background-attachment:fixed;
     border-top:25px solid orange;
     border-left:120px solid orange;
     border-bottom:25px solid orange;
     border-right:10px solid orange;
     margin-left:150px 
}

Essaye ça:

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}