49

我知道 Internet Explorer 有一些专有扩展，因此您可以执行诸如创建具有渐变背景的 div 之类的操作。我不记得元素名称或它的用法。有没有人有一些例子或链接？

4

11 回答 11

83

我用于所有浏览器渐变的代码：

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;

您需要指定一个高度或zoom: 1应用hasLayout到该元素才能在 IE 中工作。

更新：

这是一个 LESS Mixin (CSS) 版本，供所有 LESS 用户使用：

.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;
}
于 2010-06-18T13:09:21.927 回答
23

看看 IE 可以处理的自定义 CSS 过滤器 http://msdn.microsoft.com/en-us/library/ms532847.aspx

于 2008-10-17T20:37:26.500 回答
11

该filter样式应该适用于 IE8 和 IE9。

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}
于 2010-05-28T02:26:07.843 回答
7

当谈到 IE 中的渐变时，一个重要的问题是虽然你可以使用微软的过滤器......

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

...他们杀死渐变覆盖的任何文本上的清晰类型。考虑到渐变的目的通常是让 UI 看起来更好，这对我来说是一个阻碍。

所以对于 IE，我使用重复的背景图像。如果背景图像 css 与其他浏览器的渐变 CSS 结合使用（根据 Blowsie 的回答），其他浏览器将忽略背景图像而支持渐变 css，因此它最终只会应用于 IE。

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

有很多网站可以用来快速生成渐变背景；我用这个。

于 2011-12-20T01:01:12.210 回答
6

来自 Microsoft 的出色工具，可让您实时检查颜色并为所有浏览器生成 CSS：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%);
于 2012-04-27T13:28:07.113 回答
4

只是想我会添加这个有用的链接： http ://css3please.com/

展示如何让渐变在所有浏览器中工作。

于 2011-03-23T11:04:13.310 回答
3

请注意，IE10 将支持如下渐变：

background: -ms-linear-gradient(#017ac1, #00bcdf);
于 2011-07-15T16:50:35.830 回答
2

来自 ScriptFX.com文章：

<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>
于 2008-10-17T20:40:19.117 回答
1

试试这个：

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

我在与 IE 9 渐变作斗争时发现了两件事。

  1. 对-ms-filter我不起作用。我不得不简单地使用filter.
  2. 我必须将height: 100%IE 添加到我的班级才能使用渐变。
于 2012-05-06T15:45:26.733 回答
0

就我而言，我将其插入标题部分

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

然后在样式部分插入它

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#49708f', endColorstr='#293f50');
zoom: 1;
于 2020-10-13T14:48:43.027 回答