IE中的对角渐变

Posted 2023-03-06

【中文标题】IE中的对角渐变

【英文标题】：Diagonal Gradient in IE

【发布时间】：2011-08-30 22:11:59

【问题描述】：

有没有办法在 IE 中实现对角渐变？在 Chrome 中，我可以这样做：

body
    background-image:-webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0%,#f00),
    color-stop(50%,#0f0),
    color-stop(100%,#00f));

但这在 IE 中不起作用。

【参考方案1】：

是的，有可能！虽然它在其他浏览器中的效果不如真正的对角渐变。

此解决方案有两个重要方面使其发挥作用：

两个 div 具有相同的位置和不同的z-index 值（一个在另一个顶部/在另一个前面）和不同的渐变方向（一个水平，一个垂直） 渐变中的透明/半透明颜色（您可以在 CSS3 Transparency + Gradient 中了解此内容）

只需将具有垂直渐变的 div 放在具有水平渐变的 div 后面（反之亦然，这并不重要），并确保最顶部渐变的颜色不透明。

结果如下所示（Internet Explorer 8）：

还有 CSS：

//left sample
.back

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="0", startColorstr='#880088', endColorstr='#110011');
    z-index:0;


.front

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType="1", startColorstr='#55ffa885', endColorstr='#55330000');
    z-index:1;


//right sample
.diaggradientback

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000');


.diaggradientfront

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000');

更新：

此过滤器上的documention 确实表示可以同时应用多个过滤器。然而，事实证明，应用多个渐变过滤器只会应用最后一个，因此简单地将两个过滤器应用到一层是行不通的，并且需要两层。 p>

【讨论】：

你能做一个更大的正方形并把它的截图贴出来吗？看看它的实际扩展程度会很好。

已添加。这不是一个均匀的渐变，但我没有费心去调整它。如果需要，一种可以，但也可以对每个方向产生不同的效果。

这不是语义上最合理的，也不是最简洁的方式（但是在 IE 下有什么酷的效果？），但仍然很酷。

一个创造性的解决方案，但不是一个完美的解决方案

【参考方案2】：

很遗憾，简短的回答是，no, you can't. Microsoft 的渐变过滤器是二元的 - 只能从左到右或从上到下。

不过，您也许可以使用CSS3 PIE 来做您想做的事。请记住，PIE 在 IE9 中对渐变的支持有些粗略，并且可能会或可能不会起作用，即使 IE7 和 8 可以（请参阅their forums 了解更多信息）。

【讨论】：

不，CSS3 Pie 不支持对角渐变。

那么，不，你不能在不使用图像的情况下在 IE 中做对角渐变。

@Shauna 可以，只是没有其他浏览器那么简单

【参考方案3】：

我发现了这些有趣的文章，也许如果你阅读它们并对其进行一些困惑，你可能会成功:)

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/ http://weston.ruter.net/projects/css-gradients-via-canvas/

【讨论】：

虽然理论上这可以回答问题，但我们希望您在回答中包含链接文章的基本部分，并提供link for reference。不这样做会使答案面临链接失效的风险。

刚刚重新访问了页面，但它提供了信息的完整页面，而不仅仅是单个部分。

当链接断开时又会怎样呢？如果发生这种情况，您的回答中没有任何帮助。