IE中CSS3渐变问题

发布于 2024-10-12 02:19:54 字数 346 浏览 2 评论 0原文

为什么这个 CSS 3 渐变在 IE9 中不起作用。它只显示纯背景颜色，没有任何渐变。难道是有什么问题吗？谢谢。

background: #999; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); 
background: -moz-linear-gradient(top,  #ccc,  #000);

原文

Why this CSS 3 gradiant does not work in IE9. It only shows the plain background color, no any gradiant. Is there something wrong with it? Thanks.

background: #999; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); 
background: -moz-linear-gradient(top,  #ccc,  #000);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伴我老 2024-10-19 02:19:54

IE9真的支持渐变吗？我知道它不支持很多CSS3。您可以尝试查看这篇文章，它有一个解决方法对于 IE 使用渐变时。

对于您的代码，您可能还需要以下行：

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')";

或者也将 GradientType=0 添加到您的过滤字符串中。（来自此网站）

Does IE9 actually support gradients? I know it doesn't support a lot of CSS3. You could try looking at this article, it has a workaround for IE when using gradients.

In regards to your code, you may also need the line:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')";

Or add the GradientType=0 into your filter string also. (From this site)

回复收藏 0 原文

﹂绝世的画 2024-10-19 02:19:54

这是一个很好的解决方案，使用 PHP 返回 SVG 渐变，这使我们能够将设计保留在样式表中。

<?

header('Content-type: image/svg+xml; charset=utf-8');
echo '<?xml version="1.0"?>
';

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
            <stop offset="0%" stop-color="#<?=$from_stop?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?=$to_stop?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" style="fill: url(#linear-gradient);"/>
</svg>

只需将其上传到您的服务器并像这样调用 URL：

gradient.php?from=f00&to=00f

这可以与 CSS3 渐变结合使用，如下所示：

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

如果您需要以 IE9 以下为目标，您仍然可以使用旧的专有“过滤器”方法：

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

当然可以修改 PHP 代码以在渐变上添加更多停止点，或使其更加复杂（径向渐变、透明度等），但这对于那些简单（垂直）线性渐变来说非常有用。

Here is a nice workaround solution using PHP to return an SVG gradient instead, which allows us to keep our design in our stylesheets.

<?

header('Content-type: image/svg+xml; charset=utf-8');
echo '<?xml version="1.0"?>
';

$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';

?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="none" width="100%" height="100%">
    <defs>
        <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
            <stop offset="0%" stop-color="#<?=$from_stop?>" stop-opacity="1"/>
            <stop offset="100%" stop-color="#<?=$to_stop?>" stop-opacity="1"/>
        </linearGradient>
    </defs>
    <rect width="100%" height="100%" style="fill: url(#linear-gradient);"/>
</svg>

Simply upload it to your server and call the URL like so:

gradient.php?from=f00&to=00f

This can be used in conjunction with your CSS3 gradients like this:

.my-color {
    background-color: #f00;
    background-image: url(gradient.php?from=f00&to=00f);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
    background-image: -webkit-linear-gradient(top, #f00, #00f);
    background-image: -moz-linear-gradient(top, #f00, #00f);
    background-image: linear-gradient(top, #f00, #00f);
}

If you need to target below IE9, you can still use the old proprietary 'filter' method:

.ie7 .my-color, .ie8 .my-color {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}

Of course you can amend the PHP code to add more stops on the gradient, or make it more sophisticated (radial gradients, transparency etc.) but this is great for those simple (vertical) linear gradients.

回复收藏 0 原文

鸠书 2024-10-19 02:19:54

你有这个代码：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

我认为你应该将其更改为：

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCCFF, endColorstr=#000000FF);

You have this code:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

I think you should change this to:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCCFF, endColorstr=#000000FF);

回复收藏 0 原文

星軌x 2024-10-19 02:19:54

IE 上渐变的最佳解决方案是使用渐变图像和重复 x。将其放在背景中您想要的位置。并非所有浏览器都能干净地绘制渐变，有时当您这样做时它们会消失。

<table id="tabs_desc" cellpadding="0" cellspacing="0" width="100%"
  style="
    background:url('blue_gradient.png') transparent repeat-x;
    *background:url('blue_gradient_long.png') transparent repeat-y; /* Special for IE */
    width:  100%;
    background-size: contain;
    color:  #fff;
    padding: 10px;
    font-family:  Calibri;
    font-size:  11pt;
    font-weight:  bold;
    "
> ...

希望这有帮助！

The best solution for gradients on IE is to use a gradient image and repeat-x. Put that in the background and where you want it. Not all browsers draw gradients cleanly, and they disappear sometimes when you do.

<table id="tabs_desc" cellpadding="0" cellspacing="0" width="100%"
  style="
    background:url('blue_gradient.png') transparent repeat-x;
    *background:url('blue_gradient_long.png') transparent repeat-y; /* Special for IE */
    width:  100%;
    background-size: contain;
    color:  #fff;
    padding: 10px;
    font-family:  Calibri;
    font-size:  11pt;
    font-weight:  bold;
    "
> ...

Hope this helps!

回复收藏 0 原文

~没有更多了~