非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。
过时
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
-ms-filter
CSS
特性为
Microsoft extension
that sets or retrieves the filter or collection of filters applied to an object.
警告：
Not to be confused with the standard
filter
property, as the two are fundamentally incompatible with each other.
Important: As of Windows Internet Explorer 9 this feature was deprecated. As of Internet Explorer 10 this feature was removed and should no longer be used.
-ms-filter
property is specified as a string that contains a list of one or more items, separated by spaces, of the following types:
filter: <-ms-filter-function>+ -ms-filter: [ "'" <-ms-filter-function># "'" ] | [ '"' <-ms-filter-function># '"' ] where <-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy> where <-ms-filter-function-progid> = 'progid:' [ <ident-token> '.' ]* [ <ident-token> | <function-token> <any-value> ')' ] <-ms-filter-function-legacy> = <ident-token> | <function-token> <any-value> ')'
<string>
contains the list of filters, transitions, and procedural surfaces. Refer to the
Filters and Transitions Reference
了解细节。
The following example shows how to use the
-ms-filter
attribute in Internet Explorer 8.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm
-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=50), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
The following example shows how to use an inline style sheet to set the filter on an image.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm
<img style="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=50)
progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
src="/workshop/samples/author/dhtml/graphics/cone.jpg"
height="80px" width="80px" alt="cone">
The following example shows how to use scripting to set the filter on an image.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm
<body>
<p>Click the image to start the filter.</p>
// Call the function.
<div id="filterFrom"
style="position: absolute;
width: 200px;
height: 250px;
background-color: white;
filter: revealTrans()">
<img id="imageFrom"
style="position: absolute;
top: 20px;
left: 20px;"
src="sphere.jpg"
alt="sphere">
<div id="filterTo"
style="position: absolute;
width: 200px;
height: 250px;
top: 20px;
left: 20px;
background: white;
visibility: hidden;">
</div>
</div>
<script type="text/javascript">
let filterImg = document.querySelector('#filterFrom');
filterImg.addEventListener('click', doFilter);
function doFilter () {
filterFrom.filters.item(0).Apply(); // 12 is the dissolve filter.
filterFrom.filters.item(0).Transition=12;
imageFrom.style.visibility = "hidden";
filterTo.style.visibility = "";
filterFrom.filters.item(0).play(14);
}
</script>
</body>
progid:DXImageTransform.Microsoft.Gradient( <properties> ) where <properties> = [ <Enabled> | <EndColor> | <EndColorStr> | <GradientType> | <StartColor> | <StartColorStr> ]# where <Enabled> = 'Enabled=' [ true | false ] <EndColor> = 'StartColor='<color><EndColorStr> = 'StartColorStr='<color><GradientType> = 'GradientType='<integer><StartColor> = 'StartColor='<color><StartColorStr> = 'StartColorStr='<color>
Enabled
true
false
to disable.
EndColor
#RRGGBB
notation.
EndColorStr
#RRGGBB
) and colors with alpha opacity using the
#AARRGGBB
notation.
GradientType
0
(equivalent to
linear-gradient(to bottom, …)
)
linear-gradient(to right, …)
)
StartColor
#RRGGBB
notation.
StartColorStr
#RRGGBB
) and colors with alpha opacity using the
#AARRGGBB
notation.
<div class="gradient horizontal"></div> <div class="gradient vertical"></div>
html, body {
overflow-x: hidden;
max-width: 100vw;
}
.gradient {
width: 100vw;
height: 60px;
height: 50vh;
}
.gradient.horizontal {
-ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=1)';
background-image: linear-gradient(to right, #ffffff 0%, #000000 100%);
}
.gradient.vertical {
-ms-filter: 'progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ffffff", endColorStr="#000000", GradientType=0)';
background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%);
}
Not part of any specification.
| 初始值 | "" (the empty string) |
|---|---|
| 适用于 | 所有元素 |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
The following table lists the most popular DX Filters and their standards-based alternatives:
| DX Filter | Standards-based Alternative |
|---|---|
| Alpha |
opacity
|
| AlphaImageLoader |
<img>
or
background-image
and related properties
|
| Gradient |
|
| DropShadow |
text-shadow
or
box-shadow
|
| Matrix |
transform
,
transform-origin
|
In Windows Internet Explorer 8, the
-ms-filter
attribute is an extension to CSS, and can be used as a synonym for
filter
in IE8 Standards mode. When you use
-ms-filter
, enclose the progid in single quotes (
'
) or double quotes (
"
). Use commas (
,
) to separate multiple values, as shown in the Examples section.
An object must have layout for the filter to render. A simple way to accomplish this is to give the element a specified
height
and
width
, or both.
The shadow filter can be applied to the
<img>
object by setting the filter on the image's parent container.
The filter mechanism is extensible and enables you to develop and add filters later. For more information about filters, see Introduction to Filters and Transitions .