Gradient colors in Internet Explorer

2019-01-12 21:16发布

站内问答 / HTML/CSS
1463 10 4

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 it's usage. Does anyone have some examples or links?

10条回答
不美不萌又怎样
2楼-- · 2019-01-12 21:37

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) 举报
爱情/是我丢掉的垃圾
3楼-- · 2019-01-12 21:38

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) 举报
我欲成王，谁敢阻挡
4楼-- · 2019-01-12 21:49

Look at the custom CSS filters IE can handle http://msdn.microsoft.com/en-us/library/ms532847.aspx

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
5楼-- · 2019-01-12 21:49

Great tool from Microsoft, allows you to examine colors real-time and generates CSS for all browsers: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);
查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
6楼-- · 2019-01-12 21:54

A significant gotcha when it comes to gradients in IE is that although you can use Microsoft's filters...

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;

...they kill clear type on any text covered by the gradient. Given that the purpose of gradients is normally to make the UI look better, that's a show stopper for me.

So for IE I use a repeating background image instead. If the background image css is combined with the gradient CSS for other browsers (as per Blowsie's answer), other browsers will ignore the background image in favour of the gradient css, so it will only end up applying to IE.

background-image: url('/Content/Images/button-gradient.png');

There are plenty of sites you can use to quickly generate a gradient background; I use this.

查看更多
0人赞 添加讨论(0) 举报
傲
7楼-- · 2019-01-12 21:55

Note that IE10 will support gradients as follows:

background: -ms-linear-gradient(#017ac1, #00bcdf);
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)