Gradient colors in Internet Explorer

前端未结

关注

 11  685

I know that Internet Explorer has some proprietary extensions so that you can do things like create divs with a gradient background. I can\'t remember the element name or i

相关标签:

11条回答

暗喜

2020-12-04 09:43

Just thought I'd add this useful link: http://css3please.com/

Shows how to get gradients working in all browsers.

0 讨论(0)
发布评论:

提交评论
- 加载中...

灰色年华

2020-12-04 09:45

Try this:

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}

0 讨论(0)

独厮守ぢ

2020-12-04 09:46

The code I use for all browser gradients:

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.

Update:

Here is a LESS Mixin (CSS) version for all you LESS users out there:

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

0 讨论(0)

小蘑菇

2020-12-04 09:47

The filter style should work for IE8 and IE9.

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}

0 讨论(0)

一个人的身影

2020-12-04 09:48

In my case I inserted it on header section

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

then in style section insert it

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;

0 讨论(0)

孤独总比滥情好

2020-12-04 09:50

Right from ScriptFX.com article:

<body bgcolor="#000000" topmargin="0" leftmargin="0">

    <div style="width:100%;height:100%; filter: progid:
        DXImageTransform.Microsoft.Gradient (GradientType=1,
        StartColorStr='#FF006600', EndColorStr='#ff456789')">

Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below

    </div>
</body>

0 讨论(0)

1 2 下一页