preface
CSS filters are a powerful tool that can be used to achieve different visual effects (a bit like Photoshop filters in browsers). The CSS Filter property provides effects such as blurring or color offset for rendering elements before displaying them. Filters are usually used to adjust the rendering of images, backgrounds, or borders.
Browser support: Only Internet Explorer does not support the filter attribute. In order to be compatible with earlier versions of Safari and Google Browsers, the prefix -webkit- is required.
Use the syntax
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
| The title | Attribute is introduced |
|---|---|
| none | Default value, no effect. |
| blur(px) | Set the image to gaussian blur. Radius “sets the standard deviation of the Gaussian function, or how many pixels are fused together on the screen, so larger values are more blurry; If no value is set, the default is 0; This parameter sets CSS length values, but does not accept percentage values. |
| brightness(%) | Apply a linear multiplication to the image 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 linear multiplier effects. A value of more than 100% is ok, and the image will be brighter than before. If no value is set, the default is 1. |
| contrast(%) | Adjust the contrast of the image. If it’s 0 percent, it’s going to go completely black. The value is 100%. The graph stays the same. Values can exceed 100%, meaning lower comparisons 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. A shadow is an offset version of a mask that can be drawn in a particular color and can have a degree of blurring underneath the image. Function accepts<shadow>Type (defined in CSS3 context), except the “inset” keyword is not allowed. This function is similar to the existing box-shadow box-shadow property; The difference is that with filters, some browsers offer hardware acceleration for better performance.<shadow>The parameters are as follows:<offset-x> <offset-y> (must)These are the two 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. Set the vertical distance. A negative value causes the shadow to appear above the element. To view<length>Possible units.If both values are 0, the shadow appears directly after the element (if set <blur-radius> and/or <spread-radius>, will have a blur effect).<blur-radius>(optional)This is the third code <length>Value. The larger the value, the more blurry the shadow will become larger and lighter. Negative values are not allowed. If not set, the default is 0 (the edge of the shadow is very sharp).<spread-radius>(optional)This is the fourth <length>Value. A positive value causes the shadow to expand and grow, while a negative value causes the shadow to shrink. If not set, the default is 0 (the shadow is the same size as the element).Note: Webkit, as well as some other browsers, do not support the fourth length and will not render if it is added. <color> (optional)To view <color>Possible keywords and tags for this value. If not specified, the color value is browser – based. In Gecko (Firefox), Presto (Opera), and Trident (Internet Explorer), the value of the colorcolor attribute is applied. In addition, WebKit shadows are transparent if the color value is omitted. |
| grayscale(%) | Convert the image to grayscale image. Value defines the scale of the conversion. If the value is 100%, the image will be converted to gray scale completely, and if the value is 0%, the image will have no change. Values between 0% and 100% are linear multipliers of the effect. If this parameter is not set, the default value is 0. |
| hue-rotate(deg) | Apply hue rotation to the image. Angle “sets the color ring Angle at which the image will be adjusted. If the value is 0deg, the image has no change. If the value is not set, the default value is 0deg. While there is no maximum value, anything above 360deg is like going around again. |
| invert(%) | Invert the input image. Value defines the scale of the conversion. 100% value is completely reversed. If the value is 0%, the image has no change. Values between 0% and 100% are linear multipliers of the effect. If the value is not set, the default value is 0. |
| opacity(%) | Convert the transparency of the image. Value defines the scale of the conversion. A value of 0% indicates complete transparency, while a value of 100% indicates no change in the image. Values between 0% and 100% are linear multipliers of the effect and are also equivalent to image samples multiplied by number. If the value is not set, the default value is 1. This function is similar to the existing opacity property, except that some browsers provide hardware acceleration through filter to improve performance. |
| saturate(%) | Convert image saturation. Value defines the scale of the conversion. A value of 0% indicates complete unsaturated, while a value of 100% indicates no change in the image. The other values are linear multipliers of the effect. Values above 100% are allowed and have higher saturation. If the value is not set, the default value is 1. |
| sepia(%) | Convert the image to dark brown. 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 this parameter is not set, the default value is 0. |
| url() | The URL function takes an XML file that sets an SVG filter and can contain an anchor to specify a specific filter element. Such as: filter: url(svg-url#element-id) |
You can have multiple filters for the same element at the same time. For example, Filter: Brightness (150%) Brightness (1.5), but the order of the filters is different.
The default value is initial
Inherit indicates inherit from the parent.
Note: Filters usually use percentages (e.g. 75%), but can also be expressed as decimals (e.g. 0.75).
Code demo
<template> <div id="app"> <img class="animated" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/redwood-ukulele-top.jpg" alt="ukulele"> </div> </template> <style> img { display: block; max-width: 100vw; max-height: 100vh; } img.animated { animation: filter-animation 5s infinite; } @keyframes filter-animation { 0% { filter: sepia(0) saturate(2); } 50% { filter: sepia(1) saturate(8); } 100% { filter: sepia(0) saturate(2); } } </style>Copy the codeCodepen. IO /zengguanbao…
The resources
- www.runoob.com/cssref/css3…
- Css-tricks.com/almanac/pro…