Opacité et diverses questions

bonjour tout d'abord

Je débute moi aussi dans le web design et j'ai une foule de questions à poser mais rassurez vous je ne vous les livrerai pas d'un bloc

La première concerne l'opacité des backgrounds et l'incidence sur le texte contenu dedans
comment puis je faire quand j'applique une opacité à un bloc pour que cela n''impacte pas sur
la propriété color du texte qui subit alors l'opacité

Actuellement je procède ainsi

<div class="bloc1">
<p> blablablabla</p>
</div>

.bloc1{
float:left;
display:inline; /* pour corriger le bug IE sur les flottants en cas d'élements flottants mitoyens  */
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
width:120px;
height:80px;

}

.bloc1 p{
color:#f90;
padding:10px 5px 0 5px; 
text-align:left;
}

Est ce qu'en créant une classe sur le P, je vais contourner le pb ?. mais dans ce cas je vais attraper la "classite" déjà que j'ai du mal à guérir de la "divite"
Je ne vois pas

Autre question et puis c'est fini,
J'ai encore un peu de mal à saisir les subtilités des positionnements:
Est ce que le positionnement par flottement est plus pratique que l'utilisation des absolutes
et relatives, peut-on utiliser les deux techniques.

Excusez moi si je ne suis pas clair (reportez vous à la première phrase de mon post)

D'avance merci de tout ce que vous pourrez m'apporter.

SergeMarie69

Bonjour,

j´ai un compromis pour ton histoire d´opacité, mais c´est pas joli, joli, hein?!

<div class="bloc1"> 
 
</div>
<p> bla bla bla bla</p>

et pour le css

.bloc1{ 
float:left; 
display:inline; /* pour corriger le bug IE sur les flottants en cas d'élements flottants mitoyens  */ 
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
z-index:10; 
width:120px; 
height:80px; 
} 
p{ 
color:#f90;
padding:10px 5px 0 5px;  
text-align:left;
z-index:20;
position:relative;
left:-110px;
} 

bon, pis, tu vois, le flottant se combine aussi avec le "relative".

Bonjour,

Effectivement sous IE, la transparence est gérée un peu étrangement.
Pour résoudre le problème il suffit d'ajouter un attribut position: relative aux balises filles (celles ne devant pas "subir" la transparence)
Ce qui donnerait pour le css (testé avec succès sous IE7):

.bloc1{ 
float:left; 
display:inline; /* pour corriger le bug IE sur les flottants en cas d'élements flottants mitoyens  */ 
background-color:#000; 
opacity:0.4; 
filter:alpha(opacity=40); 
width:120px; 
height:80px; 
 
} 
 
.bloc1 p{ 
[b]position: relative;[/b]
color:#f90; 
padding:10px 5px 0 5px;  
text-align:left; 
} 

Modifié par Romain.E (21 Jul 2011 - 09:01)

sergemarie69 a écrit :

comment puis je faire quand j'applique une opacité à un bloc pour que cela n''impacte pas sur
la propriété color du texte qui subit alors l'opacité

La propriété opacity n'a aucune incidence sur la propriété color du texte.

jb_gfx a écrit :


La propriété opacity n'a aucune incidence sur la propriété color du texte.

Pas directement.. Mais si la boite contenant le texte passe en dessous de la boite transparente (ce qui était le cas), le rendu visuel (et la couleur perçue du texte) change.

En ce qui concerne la propriété opacity, elle s'aplique a tout le contenu du bloc auquel tu l'affecte y compris le texte.
Pour contourner le problème il y a 2 solutions:
- tu fais une petite image en opacité que tu répète dans le fond de ton élément.
- tu utilise les propriétés CSS3 qui te permettent de mettre de l'opacité avec la propriété background. attention tout de même, pour cette dernière solution, aux compatibilité IE.

Le problème de la solution de FloydinBremen c'est qu'elle est difficile à appliquer dans certains cas de figure, demande un traitement spécifique pour chaque partie de ton site et t'oblige à ajouter des éléments HTML pour le design uniquement. A éviter pour ma part.