Discussion :

[Invité]

bonjour,

je voulait faire sa sur mon site:


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 :

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
.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*/
 
}

[rodolphebrd]

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 css :

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

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 html :

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

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).

[Invité]

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

Code :

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
.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

[rodolphebrd]

Comme je vous l'ai suggéré box-shadow et border-radius n'ont plus besoin d'être préfixés.

[Invité]

a oui c'est vrai

encore merci