文章/答案/技术大牛

发布

社区首页 >问答首页 >IE8线性梯度边界半径和不透明度

问IE8线性梯度边界半径和不透明度
EN

Stack Overflow用户

提问于 2013-02-21 16:14:43

回答 1查看 3.8K关注 0票数 0

我有一个div，它有线性梯度，边界半径和不透明度。这是工作在ie9+，ff，铬等。

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

上述任何一项都不起作用。

我怎么能让他们在IE8中的同一个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);

internet-explorer

css

internet-explorer-8

opacity

css3pie

回答 1

Stack Overflow用户

发布于 2013-02-21 16:26:55

如果您与IE8有冲突，请尝试下面的示例：

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

还: 1.设置带有alpha通道透明性的背景:1用于IE无饼，2用于IE饼，3用于其他2。使用IE8 3.防止IE9使用饼图示例：

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

请记住，背景有三个声明。第一个是回退，如果饼不工作，它将显示一个坚实的背景色(即Javascript被关闭)。第二个是PIE的声明，除了IE之外，所有浏览器都会忽略这个声明。第三种方法用alpha透明设置背景。不支持这一点的浏览器将忽略它，并使用先前的声明。

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15007057

复制

相似问题

问IE8线性梯度边界半径和不透明度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE8线性梯度边界半径和不透明度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问IE8线性梯度边界半径和不透明度
EN