Discussion :

[sami_c]

Bonjour,
J'ai créé une page qui liste des éléments, en cliquant sur un élément un lightbox s'affiche (en utilisant jquery), j'ai fais en sorte que ce lightbox soit transparent, cependant son contenu l'est devenue aussi !!! Comment faire pour que seulement le cadre soit transparent, et non pas son contenu ??

[marco_fot_hxc]

Bonjour,

Pourrais-tu nous donner le bout de xhtml-css qui pose problème ? Ca aiderait pas mal je pense
Pour ce qui est de la transparence, tu peux depuis le css3 définir la l'alpha (donc la transparence) d'une couleur. En gros, ce qu'il faut retenir dans cette histoire c'est que si tu fais quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
div {
 background-color: rgba(0,0,210,0.5);
}

tu obtiens une transparence sur le conteneur uniquement alors que si tu utilises

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
div {
 opacity: 0.5;
}

tu as une transparence héritée. Ce qui doit être ton cas.

Sinon, essais aussi de mettre tout simplement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 div {
  background-color: transparent;
 }

Bon courage à toi !

[tsunamichups]

Combien de navigateurs gèrent le css3 actuellement ?
et combien de vieux navigateurs encore utilisé ne le gèrent pas ?

Pour ma part et ne le prend pas mal marco_fot_hxc, mais ce n'est pas une solution.
Des gens utilise encore ie6 (s'est leur problème certe), a la limite lui on le met de coté, mais ie7 lui est encore utiliser par pas mal de personne qui ne profiterais pas pleinement du Design comme il devrait être.

Je ne pense pas qu'on puisse dire actuellement (mais bientot j'espere ) que le css3 est une solution.


Bref

Pour en revenir au sujet, tu peut utiliser la propriété

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
background-image:url();
background-repeat:repeat;

et y mettre une image transparente plutot qu'un fond de coleur, cela n'influera pas sur le contenu

[marco_fot_hxc]

Bonsoir,

Bien entendu je ne le prends pas mal C'est un espace de débat hein
En revanche, permets de moi de te retourner une question. Comment peux-tu à la fois prôner une compatibilité cross-browser allant jusqu'à IE6 et proposer d'utiliser une image transparente (donc un PNG 24) sans préciser qu'il faudra, sous le dit IE6 utilser un substitut JS type DD_belated pour obtenir la transparence ?

De plus, les propriétés suivantes sont compatibles IE :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
-ms-filter: "alpha(opacity=10)"; /* IE 8 */ 
filter : alpha(opacity=10); /* IE < 8 */

Ou peut-être fais-je fausse route :p

[tsunamichups]

Pour utiliser une image 5px*5px le png8 serais (il me semble) suffisant
Après tu as raison, ca ne passerais pas avec ie6 pour le png (je te l'accord)

Mais après tout reste une question de choix, personnellement je ferais le choix d'en servir une maximum au default de certain

le problème étant que si on fait une feuille css3, on devra en faire une pour les autres navigateur ne interprétant pas et une spécifique a ie6
donc 3 feuilles en tout

Je n'y vois pas un gain de temps

Après ca ne reste qu'un choix personnel

[marco_fot_hxc]

Les dernières propriétés que j'ai proposées n'ont rien à voir avec le CSS3 !

[Macmillenium]

Pour ma part et ne le prend pas mal marco_fot_hxc, mais ce n'est pas une solution.

La valeur RGBa proposée par marco_fot_hxc est implémentée sur les principaux navigateurs en circulation à l'exception d'IE (toutes versions).
Une solution qui consiste à passer par le filter gradient de Ms afin d'obtenir un rendu similaire sous IE.

Cadeau Générateur RGBa pour IE.

[adiGuba]

Salut,


Intéressant le filter-gradient... même si ca reste lourd à implémenter.


Sinon il faut également penser à utiliser un rendu correct pour les anciens navigateurs qui n'interpréteront pas rgba().
Normalement ca peut se faire assez facilement en spécifiant une couleur alternative proche juste avant :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
	background-color: rgb(127, 127, 232); /* anciens navigateurs */
	background-color: rgba(0,0,210,0.5); /* navigateurs récents (CSS3 colors) */
	_background-color: rgb(127, 127, 232); /* IE < 8 */

Si rgba() est supporté, il sera utilisé, sinon ce sera la précédente valeur en rgb()

a++

[tsunamichups]

@ marco_fot_hxc : je parlais encore des propriété css3

mais les propriété rgb() et rgba() je connaissais pas

[sami_c]

merci