如何使背景图像与线性梯度工作在IE 11？ [英] How to make background-image with linear-gradient work on IE 11?

问题描述

任何想法如何让 background-image 与 linear-gradient 工作在IE 11？ p>

以下代码在IE 10上正常工作，但在IE 11上不起作用。

  background-image：url（IMAGE），-ms-linear-gradient（top，#ffffff，＃BEE38F）; 
  

我可以使 linear-gradient 在IE 6-9,11上使用以下过滤器，但在此情况下不显示背景图片。

  filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffff'，endColorstr ='＃BEE38F'，GradientType = 0）
   
 
 
 更新：这里是代码我目前有。
  background-image：url（IMAGE），-webkit-gradient（linear，left top，left bottom，从（#ffffff）到（＃BEE38F））; 
 background-image：url（IMAGE），-webkit-linear-gradient（top，#ffffff，＃BEE38F）; 
 background-image：url（IMAGE），-moz-linear-gradient（top，#ffffff，＃BEE38F）; 
 background-image：url（IMAGE），-ms-linear-gradient（top，#ffffff，＃BEE38F）; 
 background-image：url（IMAGE），-o-linear-gradient（top，#ffffff，＃BEE38F）; 
 background-image：url（IMAGE），linear-gradient（to bottom，#ffffff，＃BEE38F）; 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffff'，endColorstr ='＃BEE38F'，GradientType = 0）; 
  
 
 
解决方案
 支持在IE10 RTM及更高版本（包括IE11）上无前缀。你不需要 -ms  -  前缀，除非有一些模糊的原因，你需要定位IE10的预发布版本。
 
 
 
请注意， linear-gradient（）的方向语法不同;最初 top 现在表示为到底部（参见此博文，这个问题，以及 spec ）：
  background-image： url（IMAGE），线性梯度（到底部，#ffffff，＃BEE38F）; 
  
 
Any idea how I can make background-image with linear-gradient to work on IE 11?

The following code works fine on IE 10 but doesn't work on IE 11.
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
I can make linear-gradient to work on IE 6-9, 11 using the following filter but background image is not displayed in this case.
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 )
I'm open to an ideas.

Update: Here's the code I currently have.
background-image: url(IMAGE), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#BEE38F));
background-image: url(IMAGE), -webkit-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -moz-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -o-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 );

解决方案
linear-gradient() is supported unprefixed on IE10 RTM and later, including IE11. You never need the -ms- prefix unless for some obscure reason you need to target the pre-release versions of IE10.

Note that the directional syntax for linear-gradient() is different; what was originally top is now represented as to bottom instead (see this blog post, this question, and the spec for details):
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);


                        
这篇关于如何使背景图像与线性梯度工作在IE 11？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！