IE中的对角渐变 [英] Diagonal Gradient in IE

问题描述

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

  body {
 background-image：-webkit-gradient $ b linear，
 left top，
 right bottom，
 color-stop（0％，＃f00），
 color-stop（50％，＃0f0），
 color-stop（100％，＃00f））; 
} 
  

但在IE中无效。

解决方案

是的，这是可能的！虽然在其他browswers中效果不如真正的对角渐变。 >

此解决方案有两个重要方面可使其工作：

• 两个div相同的位置和不同的渐变方向（一个水平，一个垂直）的 z-index 值（一个在另一个之上/之前）


• 渐变中的透明/半透明颜色（您可以在在此过滤器上表示可以一起应用多个过滤器。然而，事实证明，应用多个渐变过滤器会导致仅应用最后一个渐变过滤器，因此，简单地将两个过滤器应用于一个图层不起作用，并且需要两个图层。 p>
  

  Is there a way to have a diagonal gradient in IE? In Chrome I could do something like this:

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

  but this doesn't work in IE.

  解决方案

  Yes, it is possible! Although it does not work as well as a real diagonal gradient in other browswers.

  There are two important aspects of this solution that make it work:

  • Two divs with the same position and different z-index values (one on top of/in front of the other) and different gradient directions (one horizontal, one vertical)
  • Transparent/translucent colors in gradients (you can read about this in CSS3 Transparency + Gradient)

  Simply place the div with the vertical gradient behind the div with the horizontal gradient (or vice-versa, it doesn't really matter), and make sure the coloring of the topmost gradient is not opaque.

  The result looks like this (Internet Explorer 8):

  And the 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');
  }
  

  Update:

  The documention on this filter does say that multiple filters may be applied together. However, as it turns out, applying more than one gradient filter results in only the last one being applied, so simply applying both filters to one layer doesn't work, and two layers are necessary.

  这篇关于IE中的对角渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！