Problème de transparence

[Gnarkinou]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://lostcrusade.bbfr.net/

Description du problème

Bonjour,

J'ai récupéré un template que j'ai modifié pour la mise en page de mon forum => http://lostcrusade.bbfr.net/

Je souhaite faire un fond transparent, ce qui fonctionne comme désiré. Je veux maintenant ajouter en module des vidéos, fenêtre sous forme de iframe mais dont le fond est opaque. Et c'est la que la galère commence....

Ma transparence ce fait comme suit:

Code:


#wrap {
   background-repeat: repeat-x-y;
   background-image: url('');
   -moz-border-radius: 10px;
  filter:alpha(opacity=90);
 -moz-opacity:0.90;
 -khtml-opacity: 0.90;
 opacity: 0.90;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border: 0 solid #FFFFFF;   
   -moz-box-shadow : 0 0 9px #000000;
   -webkit-box-shadow : 0 0 9px #000000;

.bodyline{
   background: opaque;
   border: none;
   }
}


Pour mes modules j'ai fais ca:

Code:


.module {
    position:relative;
    z-index: 99;
   background-color: rgb(0, 0, 0);
   background-color: rgba(0, 0, 0, 1);
   border: 1px solid #101010;   
   background-repeat: repeat-x;
   -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;


Pourtant tout reste transparent... J'ai essayé en modifiant directement la balise html et ajouter divers paramètres pour forcer l'opacité, rien à faire..

Cela vient-il du fait que #wrap et .bodyline sont transparent (d'ailleur j'ai tenté un background: opaque; mais pas mieux) et leurs attributs récupérer par tout le monde ?

Merci d'avance pour votre aide !

[Miettes]

Hello

En fait, si tu mets un élement en opacity 0.9, tous les élements à l'intérieur de celui-ci auront la même opacité.

Du coup, je te conseille d'oublier "opacity" et de plutot jouer avec le rgba.
> opacity = l'opacité de tout ton bloc
> rgba = le "a" te permet de gérer uniquement l'opacité de ta couleur de fond.

Ce qui donnerait :

Code:

 
#wrap {
  background-repeat: repeat-x-y;
  background-image: url('');
  background-color: rgba(171,40,40,0.9);
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    border: 0 solid #FFFFFF; 
  -moz-box-shadow : 0 0 9px #000000;
  -webkit-box-shadow : 0 0 9px #000000;
 
.bodyline{
  border: none;
  }
}

[Gnarkinou]

Ah ouai, bien plus simple et ca fonctionne, alors que je me prenais la tête avec opacity...
Merci !

[Miettes]

De rien

Bonne continuation ^^