| Filter | describe |
|---|
| none | The default value has no effect. |
| blur(px) | Sets a Gaussian blur to the image. The "radius" value sets the standard deviation of the Gaussian function, or how many pixels are fused together on the screen, so the larger the value, the more blurred it is;
If there is no set value, the default value is 0; This parameter can set the css length value, but does not accept the percentage value. |
| brightness(%) | Apply a linear multiplication to the picture to make it appear brighter or darker. If the value is 0%, the image will be completely black. If the value is 100%, the image does not change. Other values correspond to the linear multiplier effect. Values above 100% are also acceptable, and the image will be brighter than before. If there is no set value, the default value is 1. |
| contrast(%) | Adjust the contrast of the image. If the value is 0%, the image will be completely black. The value is 100% and the image does not change. Values can exceed 100%, meaning that a lower contrast will be applied. If no value is set, the default value is 1. |
| drop-shadow(h-shadow v-shadow blur spread color) | Set a shadow effect on the image. Shadows are synthesized below the image, and can be blurred. The offset version of the mask can be drawn in a specific color. The function accepts values of type<shadow>(defined in the CSS3 background), except for the "inset" keyword. This function is very similar to the existing box shadow box shadow attribute; The difference is that some browsers provide hardware acceleration for better performance through filters.
<shadow>parameters are as follows:
<offset-x><offset-y>(required) These are two<length>values that set the shadow offset <offset-x>Set the horizontal distance A negative value causes the shadow to appear to the left of the element <offset-y>Set the vertical distance. A negative value causes the shadow to appear above the element. View the possible units
If both values are 0, the shadow appears directly behind the element (if set <blur-radius> and/or <spread radius>, there will be a blur effect)
<blur radius>(optional) This is the third<length>value The higher the value, the more blurred the shadow will become larger and lighter. Negative values are not allowed. If not set, the default value is 0 (then the shadow boundary is very sharp)
<spread radius>(optional) This is the fourth<length>value A positive value will expand and enlarge the shadow, and a negative value will reduce the shadow. If not set, the default is 0 (the shadow will be the same size as the element)
Note: Webkit and some other browsers do not support the fourth length. If it is added, it will not render.
<color>(optional) View the possible keywords and tags of the value<color>. If not set, the color value is based on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the colorcolor attribute will be applied. In addition, if the color value is omitted, the shadow in WebKit is transparent.
|
| grayscale(%) | Converts an image to a grayscale image. The value defines the scale of the conversion. If the value is 100%, the image will be completely converted to grayscale image, and if the value is 0%, the image will not change. Values between 0% and 100% are linear multipliers of the effect. If not set, the default value is 0; |
| hue-rotate(deg) | Apply hue rotation to the image. The "angle" value sets the color ring angle value that the image will be adjusted. If the value is 0deg, the image does not change. If the value is not set, the default value is 0deg. Although there is no maximum value for this value, a value exceeding 360deg is equivalent to another circle. |
| invert(%) | Inverts the input image. The value defines the scale of the conversion. 100% value is completely reversed. A value of 0% leaves the image unchanged. Values between 0% and 100% are linear multipliers of the effect. If the value is not set, the default value is 0. |
| opacity(%) | The transparency of the converted image. The value defines the scale of the conversion. A value of 0% is completely transparent, and a value of 100% is no change in the image. If the value is between 0% and 100%, it is the linear multiplier of the effect, which is also equivalent to multiplying the number of image samples. If the value is not set, the default value is 1. This function is very similar to the existing efficiency attribute. The difference is that some browsers provide hardware acceleration to improve performance through filter. |
| saturate(%) | Convert image saturation. The value defines the scale of the conversion. A value of 0% is completely unsaturated, and a value of 100% is no change in the image. Other values are linear multipliers of the effect. If the value exceeds 100%, it is allowed to have a higher saturation. If the value is not set, the default value is 1. |
| sepia(%) | Converts the image to dark brown. The value defines the scale of the conversion. A value of 100% is completely dark brown, and a value of 0% has no change in the image. Values between 0% and 100% are linear multipliers of the effect. If not set, the default value is 0; |
| url() | The URL function accepts an XML file that sets an SVG filter and can contain an anchor point to specify a specific filter element. For example: filter: url(svg-url#element-id) |
| initial | Set attribute as default |
| inherit | Inherit this attribute from the parent element |