CSS3 filter (filter) properties
Examples
Edit all colors to black and white pictures (100% gray):
-webkit-filter: grayscale (100% ); / * Chrome, Safari, Opera * /
filter: grayscale (100%);
}
try it"
Definitions and use
filter attribute defines the elements (typically <img>) visual effects (for example: Fuzzy and saturation).
| Defaults: | none |
|---|---|
| inherit: | no |
| Animation support: | Yes. Details can be found in CSS Animation |
| version: | CSS3 |
| JavaScript syntax: | object .style.WebkitFilter = "grayscale (100%)" to try >> |
Browser Support
Figures in the table represent the first browser to support the method version number.
Immediately after the number for the specified browser -webkit- prefix.
| Attributes | |||||
|---|---|---|---|---|---|
| filter | 18.0 -webkit- | not support | 35.0 | 6.0 -webkit- | 15.0 -webkit- |
Note: Older Internet Explorer browser (4.0 to 8.0) to support non-standard "filter" property has been abandoned. IE8 and earlier browsers often use opacity property.
CSS Syntax
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Tip: Use spaces to separate multiple filters.
Filter function
Note: Filters typically use percentage (eg: 75%), of course, can also be used to represent a decimal (eg: 0.75).
| Filter | description |
|---|---|
| none | The default value, no effect. |
| blur (px) | Gaussian blur to the image settings. "Radius" to set a value standard Gaussian function is poor, or the number of pixels on the screen to melt together, so the greater the value the more blurred; If the value is not set, the default is 0; this parameter can be set css length value, but does not accept percentage values. |
| brightness (%) | Application of a linear multiplication to the picture to make it look brighter or darker. If the value is 0%, the image is all black. Value is 100%, no change in the image. Other values correspond to linear multiplier effect. Value of more than 100% are possible, the image will be brighter than the original. If the value is not set, the default is 1. |
| contrast (%) | Adjust the contrast of the image. Value is 0%, the image is all black. Value is 100%, the image unchanged. Values can exceed 100%, which means will use a lower contrast. If the value is not set, the default is 1. |
| drop-shadow (h-shadow v -shadow blur spread color) | Set up a shadow effect to the image. Shadows are synthesized in the image below, there may be ambiguity, a specific color can draw the diagram mask offset version. Function accepts <shadow> value (defined in the CSS3 background) type, in addition to "inset" keyword is not allowed. The function with the existing box-shadow box-shadow property is very similar; except that, through the filter, some browsers for better performance provides hardware acceleration.
|
| grayscale (%) | Convert the image to grayscale. It defines the value of the conversion ratio. Value of 100% is completely converted to a grayscale image, a value of 0% of the image unchanged. Values between 0% and 100%, the multiplier effect is linear. If not set, the default value is 0; |
| hue-rotate (deg) | Application to the image hue rotation. "Angle" color ring angle image is a set value adjusted value. Value 0deg, the image change. If the value is not set, the default value is 0deg. Although there is no maximum value that exceeds the value of the equivalent of another perimeter 360deg. |
| invert (%) | Inverting input image. It defines the value of the conversion ratio. 100% of the value is completely reversed. A value of 0%, the image unchanged. A value between 0% and 100%, the multiplier effect is linear. If the value is not set, the default value is 0. |
| opacity (%) | Conversion degree of transparency of the image. It defines the value of the conversion ratio. 0% is completely transparent, and a value of 100%, the image unchanged. A value between 0% and 100%, the effect is linear multiplier, multiplied by the number of samples is also equivalent to the image. If the value is not set, the default value is 1. This function is very similar to the existing opacity property, except that through the filter, in order to improve the performance of some browsers will provide hardware acceleration. |
| saturate (%) | Converts the image saturation. It defines the value of the conversion ratio. 0% is fully unsaturated, no change in the image is 100%. Other value, the multiplier effect is linear. More than 100% of the value is allowed, there is a higher saturation. If the value is not set, the default value is 1. |
| sepia (%) | Convert the image to sepia. It defines the value of the conversion ratio. Value of 100% is entirely dark brown, is 0% of the image unchanged. Values between 0% and 100%, the multiplier effect is linear. If not set, the default value is 0; |
| url () | URL function takes an XML file, which sets a SVG filter, and may include an anchor to specify a specific filter element. E.g: filter: url(svg-url#element-id) |
| initial | Property is set to default values, refer to: the CSS Initial Keyword |
| inherit | This property is inherited from the parent element, you can see: the CSS the inherit keyword |
More examples
Fuzzy examples
Photos Gaussian blur:
-webkit-filter: blur (5px) ; / * Chrome, Safari, Opera * /
filter: blur (5px);
}
try it"
Brightness Function Instance
Make the picture brighter:
-webkit-filter: brightness (200% ); / * Chrome, Safari, Opera * /
filter: brightness (200%);
}
try it"
Contrast Function Instance
Adjust the contrast of the image:
-webkit-filter: contrast (200% ); / * Chrome, Safari, Opera * /
filter: contrast (200%);
}
try it"
drop-shadow function examples
Set up a shadow effect to the image:
-webkit-filter: drop-shadow ( 8px 8px 10px red); / * Chrome, Safari, Opera * /
filter: drop-shadow (8px 8px 10px red);
}
try it"
Grayscale Function Instance
Convert the image to grayscale:
-webkit-filter: grayscale (50% ); / * Chrome, Safari, Opera * /
filter: grayscale (50%);
}
try it"
() Function examples hue-rotate
Applications hue rotation to the image:
-webkit-filter: hue-rotate ( 90deg); / * Chrome, Safari, Opera * /
filter: hue-rotate (90deg) ;
}
try it"
Invert Function Instance
Inverting input image:
-webkit-filter: invert (100% ); / * Chrome, Safari, Opera * /
filter: invert (100%);
}
try it"
Opacity Function Instance
Conversion degree of transparency of the image:
-webkit-filter: opacity (30% ); / * Chrome, Safari, Opera * /
filter: opacity (30%);
}
try it"
Saturate Function Instance
Converting the image Saturation:
-webkit-filter: saturate (800% ); / * Chrome, Safari, Opera * /
filter: saturate (800%);
}
try it"
Sepia Function Instance
Convert images to sepia:
-webkit-filter: sepia (100% ); / * Chrome, Safari, Opera * /
filter: sepia (100%);
}
try it"
Composite function
The use of multiple filters, each filter separated by spaces.
Note: The order is very important (for example, using grayscale () before using sepia () will produce a complete gray scale image).
-webkit-filter: contrast (200% ) brightness (150%); / * Chrome, Safari, Opera * /
filter: contrast (200%) brightness (150%);
}
try it"
All filter examples
The following example demonstrates how to use all the filter:
-webkit-filter: blur (4px) ;
filter: blur (4px);
}
.brightness {
-webkit-filter: brightness (0.30) ;
filter: brightness (0.30);
}
.contrast {
-webkit-filter: contrast (180% );
filter: contrast (180%);
}
.grayscale {
-webkit-filter: grayscale (100% );
filter: grayscale (100%);
}
.huerotate {
-webkit-filter: hue-rotate ( 180deg);
filter: hue-rotate (180deg) ;
}
.invert {
-webkit-filter: invert (100% );
filter: invert (100%);
}
.opacity {
-webkit-filter: opacity (50% );
filter: opacity (50%);
}
.saturate {
-webkit-filter: saturate (7) ;
filter: saturate (7);
}
.sepia {
-webkit-filter: sepia (100% );
filter: sepia (100%);
}
.shadow {
-webkit-filter: drop-shadow ( 8px 8px 10px green);
filter: drop-shadow (8px 8px 10px green);
}
try it"
related articles
HTML DOM Reference: Style attributes the filter