0

我有一个具有线性渐变、边框半径和不透明度的 div。这适用于 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);
4

1 回答 1

2

If u having a conflict with IE8 try this example:

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

also: 1. set background with alpha channel transparancy: 1st for IE no PIE, 2nd for IE PIE, 3rd for others 2. Use behavior for IE8 3. prevent IE9 using PIE example:

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

Keep in mind that there are three declarations for the background. The first is the fallback which will show a solid background color if PIE doesn't work (i.e. Javascript is switched off). The second is the declaration for PIE which will be ignored by all browsers other than IE using PIE. The third sets the background with alpha transparency. Browsers that don't support this will ignore it and use the earlier declaration.

i hope this will help u :)

于 2013-02-21T16:26:55.553 回答