Transparence css 3

Version imprimable

Transparence css 3

bonjour,

je voulait faire sa sur mon site:
http://forum.aideonline.com/static/m...05/capture.jpg

sa marche très bien mais le seul souci c'est que quand je veut appliquer la transparence 40% ou 30% sa marche mais tout devient transparent même le texte, alors je voudrait juste que sais le cadre qui devient transparent mais pas le contenu qu'il y a dedans
savez comment on fait sa ?
voici le code css:

Code:

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
.border_gradient {
background-color: transparent;
border: 3px solid #ddccb5;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ddccb5', endColorstr = '#ddccb5');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ddccb5', endColorstr = '#ddccb5')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #ddccb5, #ddccb5);
background-image: -ms-linear-gradient(top, #ddccb5, #ddccb5);
background-image: -o-linear-gradient(top, #ddccb5, #ddccb5);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ddccb5), to(#ddccb5));
background-image: -webkit-linear-gradient(top, #ddccb5, #ddccb5);
background-image: linear-gradient(top, #ddccb5, #ddccb5);
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
opacity: 1.0;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 100);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 100);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*/
 
}

Bonjour,

Vous pouvez utiliser l'écriture suivante:
en rgba la dernière valeur gère l'opacité et ne s'applique qu'au background:
rgba(221,204,181,0.8)
Code:

1 2 3 4 5 6 7 8 9 .b_g { height:100px; width:600px; border: 3px solid #ddccb5; border-radius: 50px; box-shadow: 0px 0px 20px #000000; background: -o-linear-gradient(top, rgba(221,204,181,0.8), rgba(221,204,181,0) ); background: -webkit-gradient( linear, 0 100%, 0 0, from(rgba(221,204,181,0.8)), to(rgba(221,204,181,0) ) ); }
Code:

1 2 3 4 <div class="b_g"> <p>qsdfqsdfqsdfq</p> <p>qsdfqsdfqsdfq</p> </div>
Note: j'ai enlevé les propriétés superflues (celles qui ne sont plus préfixées) et concernant le background je ne l'ai fait que pour opéra et safari (à vous de finir).

merci pour votre réponse
j’espère ne pas avoir fait d'erreur sur le code
voici mon nouveau code:

Code:

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
.border_gradient {
background-color: transparent;
border: 3px solid #ddccb5;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ddccb5', endColorstr = '#ddccb5');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ddccb5', endColorstr = '#ddccb5')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
	background: -o-linear-gradient(top, rgba(221,204,181,0.5),     rgba(221,204,181,0) );
	background: -webkit-gradient( linear, 0 100%, 0 0, from(rgba(221,204,181,0.5)), to(rgba(221,204,181,0) ) );
/*Use "background-clip: padding-box" when using rounded corners to avoid the gradient bleeding through the corners*/
/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
opacity: 1.0;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 100);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 100);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*/
 
}

éffectivement sa marche très bien j'ai tester que sur chrome pour l'instant

21/05/2013, 21h13
rodolphebrd

Comme je vous l'ai suggéré box-shadow et border-radius n'ont plus besoin d'être préfixés.;)
21/05/2013, 21h34
Invité

a oui c'est vrai

encore merci:ccool: