IE8 gradient linéaire, bordure-rayon et opacité

J'ai un div qui a un dégradé linéaire, une bordure-rayon et une opacité. cela fonctionne dans ie9 +, ff, chrome, etc.

mais dans IE8 j'ai un problème (avec css3pie):
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#40000000", endColorstr="#40FFFFFF",GradientType=1 );
cela va obtenir mon dégradé et mon opacité, mais ignore mon border-radius: 0 0 100% 0;

quand j'utilise le fond de tarte:
-pie-background: linear-gradient(right, #cce6f5 21%, ".$block_color." 110%);
mon dégradé linéaire fonctionne et mon rayon de bordure fonctionne, mais je ne peux pas obtenir l’opacité qui fonctionne. J’ai essayé:

opacity:0.4 // not supported in IE8
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40);

Aucune de ces solutions ne fonctionne.

comment puis-je les amener tous les trois à travailler sur la même division dans IE 8?

MODIFIER plein css du bloc:

width: 204px;
height: 87px;
margin-top: 20px;

opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);

-o-border-bottom-right-radius: 100%; /* Opera */
-webkit-border-bottom-right-radius: 100%;
-moz-border-radius-bottomright: 100%;
border-radius:0 0 100% 0;

position:relative;
z-index:1;

background-image: linear-gradient(right, #cce6f5 21%, ".$block_color." 110%);
background-image: -o-linear-gradient(right , #cce6f5 21%, ".$block_color." 110%);
background-image: -moz-linear-gradient(right , #cce6f5 21%, ".$block_color." 110%);
background-image: -webkit-linear-gradient(right , #cce6f5 21%, ".$block_color." 110%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#40".$ms_block_color."",endColorstr="#40CCE6F5",GradientType=1 );
zoom:1;
background-image: -webkit-gradient(
linear,
right ,
left ,
color-stop(0.21, #cce6f5),
color-stop(0.80, ".$block_color.")
);
behavior: url(/includes/PIE.htc);

Réponses:

Si vous êtes en conflit avec IE8, essayez cet exemple:

.div {
background:rgb(0,0,0);
background:rgba(0,0,0,0.4);
-pie-background:rgba(0,0,0,0.4);
}

également: 1. définir l’arrière-plan avec la transparence du canal alpha: 1er pour IE sans PIE, 2e pour IE PIE, 3ème pour les autres 2. Utiliser le comportement pour IE8 3. empêcher IE9 en utilisant l'exemple PIE:

:root *> .div {
behavior: none;
}

N'oubliez pas qu'il y a trois déclarationspour le fond. La première est la solution de secours qui affichera une couleur de fond unie si PIE ne fonctionne pas (c.-à-d. Que Javascript est désactivé). La seconde est la déclaration de PIE qui sera ignorée par tous les navigateurs autres que IE utilisant PIE. fond avec transparence alpha. Les navigateurs qui ne le supportent pas l’ignoreront et utiliseront la déclaration précédente.

J'espère que cela vous aidera :)