IE8 - div中的圆角不透明度答案

【问题标题】：IE8 - Rounded corners in div with opacityIE8 - div中的圆角不透明度
【发布时间】：2014-01-23 12:50:11
【问题描述】：

我在 IE8 中使用过滤器使 div 背景透明：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

当我想制作圆角时，我找到了带有 css 的 PIE.htc

-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius:10px; 
-ms-behavior: url('./../css/PIE.htc');
behavior: url('./../css/PIE.htc');

但是当我尝试组合这段代码时，我得到了带有圆角但没有不透明度的元素。这是我的元素的完整 CSS 代码：

#frontpage .form_wrapper .form_background{
width:100%; 
height: 100%;
position: absolute;
z-index: 1; 
opacity: 0.7; 
background-color: #ffffff; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius:10px; 
-ms-behavior: url('./../css/PIE.htc');
behavior: url('./../css/PIE.htc');}

有可能吗？

更新

感谢您的回答。我遇到了一个问题：

-pie-background:rgba(255,255,255,.7);

在除 IE 之外的任何其他浏览器中都无法使用。所以，我必须只为 IE8 包含它。这是我的解决方案，也许它可以帮助某人。 HTML 文件：

 <!--[if lte IE 8]><div class="IE IE8andLower form_background rounded_corners"></div><![endif]-->
 <!--[if gt IE 8]><div class="IE IE8higher form_background rounded_corners"></div><![endif]-->
 <!--[if !IE]>--><div class="notIE form_background rounded_corners"></div><!--<![endif]-->

以及对应的CSS规则：

#frontpage .form_wrapper .form_background{
    width:100%; 
    height: 100%; 
    position: absolute; 
    z-index: 1; 
    opacity: 0.7; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius:10px;
 }

#frontpage .form_wrapper .form_background.notIE,#frontpage .form_wrapper .form_background.IE.IE8higher {
    background-color: #ffffff
 }

#frontpage .form_wrapper .form_background.IE.IE8andLower{ 
    -pie-background:rgba(255,255,255,.7); 
    behavior: url('./../css/PIE.htc');
 }

【问题讨论】：

标签： css internet-explorer-8 pie-chart

【解决方案1】：

您不能使用 ms 过滤器和不透明度，但可以使用 css pie 背景属性来获得 rgba 值：

-pie-background:rgba(255,255,255,.7);

只需删除您的背景颜色：#fff

【讨论】：

+1。 CSS3Pie 不能与-ms-filter:opacity 一起使用。这是一个已知问题，CSS3Pie ticketting system 中有很多关于它的讨论。