[英]CSS Gradients in Internet Explorer 8
The code is here: http://jsfiddle.net/xEULj/ 代码在这里: http : //jsfiddle.net/xEULj/
#rt-header {
width: 600px;
z-index: 2;
position: relative;
background: -webkit-linear-gradient(left, red, red 40%, green 40%, green);
background: -moz-linear-gradient(left, red, red 40%, green 40%, green);
background: -o-linear-gradient(left, red, red 40%, green 40%, green);
background: -ms-linear-gradient(left, red, red 40%, green 40%, green);
background: linear-gradient(left, red, red 40%, green 40%, green);
}
Has there been a way to make this happen in IE yet? 有没有办法在IE中实现这一点呢? Some work-around that I have yet to find?
我还有一些解决方法吗? I've actually just found out that this doesn't work in IE10, I thought it would, coming from here: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html , but I guess not.
我实际上刚刚发现这在IE10中不起作用,我认为它会来自这里: http : //ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html ,但我猜不是。
Any ideas, or do I just need to use an image? 任何想法,或者我只需要使用图像?
There is IE10 support below with gradient going from green to red. 下面有IE10支持,渐变从绿色变为红色。
#rt-header
{
background: #ff3232; /* Old browsers */
background: -moz-linear-gradient(left, #ff3232 1%, #ff2828 49%, #3fff30 49%, #3fff00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%,#ff3232), color-stop(49%,#ff2828), color-stop(49%,#3fff30), color-stop(100%,#3fff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* IE10+ */
background: linear-gradient(to right, #ff3232 1%,#ff2828 49%,#3fff30 49%,#3fff00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#3fff00',GradientType=1 ); /* IE6-9 */
}
I believe you might need to use the to keyword. 我相信您可能需要使用to关键字。
try background: linear-gradient(to right, red, red 40%, green 40%, green); 尝试背景:线性渐变(右,红,红40%,绿40%,绿);
You can use pseudo-elements to fill the given part of the element with the solid color: 您可以使用伪元素用纯色填充元素的给定部分:
#rt-header {
width: 600px;
z-index: 2;
position: relative;
background: green;
}
#rt-header:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background: red;
z-index: -1;
}
Should work in IE8 (tested with netrenderer.com). 应该在IE8中工作(使用netrenderer.com测试)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.