Setting linear gradient's starting and ending

2019-07-22 04:18发布

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?

1条回答
Bombasti
2楼-- · 2019-07-22 04:47

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);
}
查看更多
登录 后发表回答