transparence css

18 avr. 2007, 19:04

Bonjour,

comment fait on pour afficher une page popup de fond transparent?
On doit cliquer sur un lien d'une page, qui fait apparaitre une page de la meme taille que la page appelante mais qui aurait un fond transparent et de cette maniere, on verrai encore la page appelante.
merci

18 avr. 2007, 23:34

=> http://www.phpfrance.com/forums/voir_sujet-28326.php

19 avr. 2007, 07:56

Option envisageable : créer un pixel avec une couleur et un degré de transparence selon ta convenance, en png ou en gif et tu le mets en arrière-plan de ton div.

19 avr. 2007, 15:53

Le problème c'est la gestion de la transparence par IE6 mais la solution ci-dessus est la plus évidente. D'autant que les utilisateurs de windows XP migrent de plus en plus sur IE7, ce qui tend à diminuer les défauts de transparence.

Tu peux aussi procéder de la manière suivante :

- Crées une image au format gif de 2px X 2px
- Sur la diagonale remplis les 2 pixels de la couleur que tu voudrais transparente
- enregistres au format gif
- Dans ton code renseigne ta classe ainsi:

Code : Tout sélectionner

.class
{
background: url(./imgs/back.gif) transparent;
}

Le problème c'est qu'il ne s'agit pas d'un "vrai" effet de transparence étant étant donné que la "diagonale" va masquer ce qu'il y a dessous.

20 avr. 2007, 15:51

Ok, merci pour toutes les infos mais je ne pense pas que se soit ça ma solution.
J'aimerai qu'à partir d'une page d'un site, en cliquant sur un lien, cela ouvre une nouvelle fenetre qui ai la meme taille que la 1er mais qui aurait un fond transparent ou incolore... De cette facon, on verrait toujours la 1ere pages. Bien entendu, je sais que c'est assez compliqué d'expliqué ce que je veux faire. Il existe un site qui fait cela: www.cancoon.fr, lorsqu'on clique sur la phot d'un membre, et qu'on clique sur envoyer un message, regardez c surprenant...

merci.

23 avr. 2007, 11:22

Humm, je n'ai pas super envie de m'inscrire sur ton site, mais si j'ai compris tu veux faire ceci :

- Crées une image en png de la couleur de transparence que tu veux, en lui attribuant le niveau de transparence que tu souhaites, enregistre la en png puis :

Dans ta partie <head> :

Code : Tout sélectionner

<script type="text/javascript" src="./montre.js"></script>

Dans ton fichier <montre.js> :

Code : Tout sélectionner

//cf : alsacreations
window.onload=montre;
function montre(id)
{
	var item = document.getElementById(id);
	if (document.getElementById(id))
	{
		document.getElementById(id).style.display='none';
	}
	if (item)
	{
		item.style.display='block';
	}
}

Dans ton <Css> :

Code : Tout sélectionner

#alpha
{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	background: url(./imgs/alpha.png);
	z-index:50;
	display: none;
	color: #fff;
}

Dans ton <Body> :

Code : Tout sélectionner

<div id="alpha">
	blablabla
</div>

Code : Tout sélectionner

<a href="#" onclick="javascript:montre('alpha');">Cliquez ici</a>

/!\Attention : cette méthode ne fonctionne pas avec ie6 qui ne gère pas la transparence des png!

23 avr. 2007, 14:08

...cette méthode ne fonctionne pas avec ie6 qui ne gère pas la transparence des png!

Pas tout à fait exact :
IE6 gère la transparence des png 8 mais effectivement pas des png 24.

Cependant il existe un JavaScript qui permet d'utiliser des png 24 avec transparences sous IE6. Une recherche sur le forum devrait permettre de retrouver le sujet qui en a déjà fait mention.

23 avr. 2007, 14:54

Voici le script : http://homepage.ntlworld.com/bobosola/pnghowto.htm

23 avr. 2007, 17:01

je viens de tomber là dessus :

http://mbaebusiness.typepad.com/mbaebus ... ng_tr.html

intéressant:)

transparence css

Qui est en ligne