Question

我有一个div，它有一个线性渐变，一个border-radius和不透明度。这适用于ie9 +，ff，chrome等。

但在IE8中我遇到了问题（使用css3pie）：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#40000000", endColorstr="#40FFFFFF",GradientType=1 );
这会得到我的渐变和不透明度，但会忽略我的border-radius: 0 0 100% 0;

当我使用馅饼背景时：
-pie-background: linear-gradient(right, #cce6f5 21%, '.$block_color.' 110%);
我的线性渐变起作用，我的边框半径起作用，但我无法使不透明度起作用。我试过了：

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

以上工作都没有。

如何让他们三个在IE 8中的同一个div上工作？

修改块的完整css：

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

Answer 1

如果您与IE8发生冲突，请尝试以下示例：

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

也： 1.设置背景与alpha通道透明度：第一个用于IE无PIE，第二个用于IE PIE，第三个用于其他 2.使用IE8的行为 3.使用PIE示例阻止IE9：

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

请记住，后台有三个声明。第一个是后备，如果PIE不起作用将显示稳固的背景颜色（即Javascript被关闭）。第二个是PIE的声明，除了使用PIE的IE以外，所有浏览器都会忽略它。第三个用alpha透明度设置背景。不支持此功能的浏览器会忽略它并使用之前的声明。

我希望这会对你有所帮助:)。

IE8线性渐变，边界半径和不透明度

1 个答案: