---
title: "ie渐变滤镜和半透明滤镜"
description: "之前讨论了[css3渐变属性](http://blog.hicc.me/ued/2012-11-24/css3-gradients.html \"css3笔记——渐变gradients\")，但在ie9（[ie10支持css3渐变](http://blogs.msdn.com/b/ie_cn/archive/2012/06/27/css-gradients-in-ie10-release-preview.aspx)）以下的ie浏览器不知css规范中的渐变，但是ie自己私有的渐变滤镜也可以实现渐变，其语法为："
url: "https://hicc.pro/p/blog/ie-gradient-opacity-filter"
author: "tyler wang"
published: "2012-12-09T16:33:27.000Z"
updated: "2012-12-09T16:33:27.000Z"
category: "blog"
tags:
  - "ie半透明滤镜"
  - "ie渐变滤镜"
  - "ie滤镜"
lang: "zh-CN"
site: "Hipo日志"
---

# ie渐变滤镜和半透明滤镜

之前讨论了[css3渐变属性](http://blog.hicc.me/ued/2012-11-24/css3-gradients.html "css3笔记——渐变gradients")，但在ie9（[ie10支持css3渐变](http://blogs.msdn.com/b/ie_cn/archive/2012/06/27/css-gradients-in-ie10-release-preview.aspx)）以下的ie浏览器不知css规范中的渐变，但是ie自己私有的渐变滤镜也可以实现渐变，其语法为：

filter: progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled,gradientType=num,startcolorstr=ARGB,endcolorstr=ARGB);

- enabled ：设置滤镜是否激活，布尔值，有true和falsh，默认值为true，表示激活。
- gradientType：设置渐变的类型，1代表横向，0代表横向。
- startcolorstr：可选值，定义渐变起始颜色和透明度，其格式为十六进制的ARGB，A代表透明度（00为完全透明）。默认值为#FF0000FF（不透明蓝色）。
- endcolorstr：设置渐变结束的颜色和透明度，默认为#FF000000（不透明黑色）。

实例代码：

 filter: progid:DXImageTransform.Microsoft.gradient(enabled=true,gradientType=1,startcolorstr=#AA8C0095,endcolorstr=#00008299); filter: progid:DXImageTransform.Microsoft.gradient(enabled=true,gradientType=0,startcolorstr=#AA8C0095,endcolorstr=#00008299); filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1);

<div class="wp-caption alignnone" id="attachment_433" _style="width: 689px">[![ie渐变滤镜](https://image.hicc.pro/wp-content/uploads/2012/12/ie-gradient-filter1.jpg "ie-gradient-filter")](https://image.hicc.pro/wp-content/uploads/2012/12/ie-gradient-filter1.jpg)ie渐变滤镜

</div>ie滤镜中常用还有透明度滤镜，ie的透明度滤镜比较强大（[详情](http://msdn.microsoft.com/en-us/library/ms532967%28VS.85%29.aspx)），但用的比较多的还是半透明的滤镜。  
 例如：

</pre> background-color:#8C0095; filter:alpha(opacity=50); <pre>

<div class="wp-caption alignnone" id="attachment_434" _style="width: 331px">[![ie半透明滤镜](https://image.hicc.pro/wp-content/uploads/2012/12/ie-opacity-filter.jpg "ie-opacity-filter")](https://image.hicc.pro/wp-content/uploads/2012/12/ie-opacity-filter.jpg)ie半透明滤镜

</div>————————每篇一一图—————————

<div class="wp-caption alignnone" id="attachment_435" _style="width: 646px">[![casual 4am walks](https://image.hicc.pro/wp-content/uploads/2012/12/casual-4am-walks-636x310.jpg "casual 4am walks")](https://image.hicc.pro/wp-content/uploads/2012/12/casual-4am-walks.jpg)casual 4am walks

</div>

---

原文 / Source: <https://hicc.pro/p/blog/ie-gradient-opacity-filter>