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

问题描述

有没有办法在 IE 中设置对角线渐变?在 Chrome 中，我可以做这样的事情:

body{背景图像:-webkit-梯度(线性，左上角，右下角，色标(0%,#f00),色标(50%,#0f0),色标(100%,#00f));}

但这在 IE 中不起作用.

解决方案

是的，这是可能的！尽管它在其他浏览器中的效果不如真正的对角线渐变.

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

• 两个具有相同位置和不同 z-index 值(一个在另一个顶部/另一个前面)和不同渐变方向(一个水平，一个垂直)的 div
• 渐变中的透明/半透明颜色(您可以在 此过滤器确实表示可以同时应用多个过滤器.然而，事实证明，应用多个渐变过滤器只会应用最后一个过滤器，因此简单地将两个过滤器应用于一层是行不通的，两层 是必需的.>

  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屋！