Opacité s'applique à tout le div

**Baptiste78** · 25/09/2009, 12h11

Bonjour,

J'ai un div

Code :

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

<div style="width: 263px; height: 24px; background-image: url(barre_haut.gif); padding-left: 10px; filter:alpha(opacity=70);-moz-opacity:0.70;opacity:0.70;">

Dans ce div, j'ai des images et du texte, le problème est, que je veux appliquer seulement l'opacité 70 à l'image de fond de mon div (barre_haut.gif), je veux que les images et le texte soient à opacité maximum...comment faire ?

Merci d'avance pour votre aide,
Bonne journée.

**Ethyde** · 25/09/2009, 12h30

Bonjour,

L'opacité s'applique à toutes éléments contenu, et sans avoir vraiment cherché, je n'ait jamais trouver comment faire, hormis à repenser ma structure ou mes images

**Baptiste78** · 25/09/2009, 12h39

Le problème est que je ne peux pas disposer mes divs autrement, j'avais déjà essayé et c'était impossible dans ma situation.

Ne serait-il pas possible de créer un effet de transparence avec du javascript par exemple ?

**Ethyde** · 25/09/2009, 12h44

Peut être mais j'avoue ne jamais avoir chercher dans cette voie, et avoir préféré trouver des méthodes mettant en oeuvre moins de techno pour une simple transparence

Si tu nous donnais un lien ou ton code source histoire de se rendre compte

**adiGuba** · 30/09/2009, 12h56

Salut,

opacity s'applique forcément à l'élément complet (textes et images), y compris ses descendants.

Une solution serait de convertir ton image en PNG et d'appliquer une transparence directement sur l'image. L'avantage du PNG sur le GIF est justement de gérer un niveau de transparence par pixel, là où le GIF ne possède qu'une couleur totalement transparente.

Quelques exemples ici : http://entropymine.com/jason/testbed/pngtrans/

Seul problème : cela ne fonctionne pas sous IE5.5 et IE6.
Si tu as besoin de supporter ces navigateurs à l'identique il faudra passer par du javascript supplémentaire pour corriger cela : http://www.twinhelix.com/css/iepngfix/

a++

**BnA** · 30/09/2009, 16h45

Ce qui suit ne marche pas?

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
div#aRendreTransparente{
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;
}
 
div#aRendreTransparente *{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

En gros, on applique la transparence (0.7) à la DIV et son contenu, mais on redéclare directement une transparence (à 1, donc opaque) à tout le contenu de cette DIV.

Ca, ça ne marche pas? (J'avoue que je n'ai jamais testé cette méthode)

**adiGuba** · 30/09/2009, 16h57

Envoyé par BnA

En gros, on applique la transparence (0.7) à la DIV et son contenu, mais on redéclare directement une transparence (à 1, donc opaque) à tout le contenu de cette DIV.

Ca, ça ne marche pas? (J'avoue que je n'ai jamais testé cette méthode)

Non avec opacity cela ne marche pas, car il s'applique à tous les éléments et il se cumule...

Pour le filter de IE par contre je ne suis pas sûr du fonctionnement...

De toute manière si c'est pour rendre une image transparente, autant travailler directement sur l'image

a++

**Baptiste78** · 30/09/2009, 22h11

Envoyé par adiGuba

Salut,

opacity s'applique forcément à l'élément complet (textes et images), y compris ses descendants.

Une solution serait de convertir ton image en PNG et d'appliquer une transparence directement sur l'image. L'avantage du PNG sur le GIF est justement de gérer un niveau de transparence par pixel, là où le GIF ne possède qu'une couleur totalement transparente.

Quelques exemples ici : http://entropymine.com/jason/testbed/pngtrans/

Seul problème : cela ne fonctionne pas sous IE5.5 et IE6.
Si tu as besoin de supporter ces navigateurs à l'identique il faudra passer par du javascript supplémentaire pour corriger cela : http://www.twinhelix.com/css/iepngfix/

a++

Tout d'abord merci pour vos réponses !

J'aimerais appliquer ta solution, si j'ai bien compris ce n'est pas le serveur qui agit sur la transparence de l'image mais l'image elle même, donc logiquement il faut un logiciel pour le faire. Quel logiciel utiliser pour rendre mon image transparente ?

Merci d'avance !

**adiGuba** · 01/10/2009, 08h38

N'importe quel logiciel de traitement d'image fait l'affaire... comme Gimp ou PhotoShop !

Par contre cela sort de mes compétence...

a++

**Baptiste78** · 01/10/2009, 12h35

J'ai également trouver un code qui fonctionne surement avec la librairie GD, le voici :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<?php
 
function modif_alpha($src , $dest , $alpha){
 /* 
 * webmaster@creatixnet.com - licence bananière 
 * ("faites de ce code ce que vous voulez...")
 *
 * Paramètres : $src : fichier source
 * $dest : fichier de destination
 * $alpha : transparence (entre 0 (opaque) et 127 (transparent))
 *
 * EX : modif_alpha('image.jpg', 'image.png', 70)
 * rend l'image à moitié transparente.
 */ 
 
 if (file_exists($src)) $size = getimagesize($src);
 else return FALSE; 
 
 switch($size[2])
 {
  case 1 :
   if (imagetypes() & IMG_GIF)
    $pic = imagecreatefromgif($src);
   break;
  case 2 :
   if (imagetypes() & IMG_JPG)
    $pic = imagecreatefromjpeg($src);
   break;
  case 3 :
   if (imagetypes() & IMG_PNG)
    $pic = imagecreatefrompng($src);
   break;
  default :
   if (preg_match("/\.wbmp$/i", $src) && (imagetypes() & IMG_WBMP))
    $pic = imagecreatefromwbmp($src);
 }
 if (!$pic) return FALSE;
 
 
 $new=imagecreatetruecolor($size[0], $size[1]);
 imagealphablending($new, FALSE);
 imagesavealpha ($new, true);
 $colors_num = imagecolorstotal($pic);
 
 
 for($x=0;$x<$size[0];$x++) {
   for($y=0;$y<$size[1];$y++) {
     $colorat=imagecolorat($pic,$x,$y);
     $color = imagecolorsforindex($pic, $colorat);
     $r = $color["red"];
     $g = $color["green"];
     $b = $color["blue"];
     $idx=imagecolorallocatealpha($new,$r,$g,$b,$alpha);
     imagesetpixel($new,$x,$y,$idx);
   }
 }
 imagepng($new, $dest);
 return TRUE;
}
 
?>

Je fais un

Code php :

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

modif_alpha('espace_membre.png', 'espace_membre.png', 70);

Mais l'image ne s'affiche pas, pourquoi ça ?

Et quelqu'un connaît-il la solution pour faire un png transparent avec un logiciel comme photofiltre ? Merci d'avance !

Opacité s'applique à tout le div

CSS

Discussions similaires

Partager

Partager