在MSIE 9及更早版本中设置线性渐变的开始和结束位置 [英] Setting linear gradient's starting and ending position in MSIE 9 and older

问题描述

我有这个CSS

  background-image：linear-gradient（360deg，rgb（255,255,255）25％，rgb 241,123,25）75％）; $ ov $，-webkit，-ms（对于IE10）前缀的
  

>

我需要使用MSIE的过滤器来获得旧IE的这种行为。

我可以这样做

  filter：progid：DXImageTransform.Microsoft.gradient（startColorStr ='＃FFFFFF'，EndColorStr ='＃F17B19'，gradientType ='1'）; 
  

但在以前的情况下，它的行为如下：

  background-image：linear-gradient（360deg，rgb（255,255,255），rgb（241,123,25））; 
  

或

  background-image：linear-gradient（360deg，rgb（255,255,255）0％，rgb（241,123,25）100％）; 
  

有一种方法（不使用多个div 使用MSIE的CSS过滤器，可以得到一个渐变的结束点（这里是25％和75％）？

解决方案

但是，你可以使用

/ css3pie.com/rel =nofollow> CSS3 PIE ，它使用JavaScript。

这是相对无痛的：

  div {
 background-image：-moz-linear-gradient（360deg，rgb（255,255,255）25％，rgb（241,123,25） ）; 
 
 -pie-background：linear-gradient（360deg，rgb（255,255,255）25％，rgb（241,123,25）75％）; 
 behavior：url（/PIE.htc）; 
} 
  

I have this CSS

background-image: linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);

with -moz, -o, -webkit, -ms (for IE10) prefixes.

I need to get this behaviour for older IEs using MSIE's filter.

I can do this

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#F17B19', gradientType='1');

But in previous case it behaves as

background-image: linear-gradient(360deg,rgb(255,255,255),rgb(241,123,25));

or

background-image: linear-gradient(360deg,rgb(255,255,255) 0% ,rgb(241,123,25) 100%);

Is there a way (without using multiple divs) to accomplish setting starting and ending point of a gradient (in this case 25% and 75%) using MSIE's CSS filter?

解决方案

Unfortunately, it's completely impossible to do it with filter.

However, you can do it using CSS3 PIE, which uses JavaScript.

It's relatively painless:

div {
    background-image: -moz-linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);

    -pie-background: linear-gradient(360deg,rgb(255,255,255) 25% ,rgb(241,123,25) 75%);
    behavior: url(/PIE.htc);
}

这篇关于在MSIE 9及更早版本中设置线性渐变的开始和结束位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！