开发者

CSS gradients in IE9

开发者 https://www.devze.com 2023-04-04 09:44 出处:网络
I tried using the \"ultimate CSS gradient generator\" and it produced the following: background: #657575; /* Old browsers */

I tried using the "ultimate CSS gradient generator" and it produced the following:

background: #657575; /* Old browsers */
background: -moz-linear-gradient(left, #657575 0%, #758585 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#657575), color-stop(100%,#758585)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #657575 0%,#758585 100%); /* Chrome10+,Safari5.1+ */
background: -开发者_JS百科o-linear-gradient(left, #657575 0%,#758585 100%); /* Opera11.10+ */
background: -ms-linear-gradient(left, #657575 0%,#758585 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#657575', endColorstr='#758585',GradientType=1 ); /* IE6-9 */
background: linear-gradient(left, #657575 0%,#758585 100%); /* W3C */

But is seems that the gradient does not work at least with my version of IE9. So is there any way I can produce a simple horizontal gradient with IE9?


Does IE9 support CSS linear gradients?

background:#fff;
background-image: -moz-linear-gradient(top, #fff, #000);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #fff),color-stop(1, #000));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/ 


Here is a site that might help you regarding CSS gradients:
http://www.htmlcenter.com/blog/cross-browser-gradient-backgrounds/

In my option, for fixed height elements I usually use a 1px image and repeat that image across the width of the element. That way you know it will look the same in all browsers.

Example:

.element{
height: 30px;
background: url(<1px image location>) repeat-x;
}

There are also websites that will create these gradient images for you.
Here is one that is free to use:
http://www.ogim.4u2ges.com/gradient-image-maker.asp

0

精彩评论

暂无评论...
验证码 换一张
取 消