preface

When I was watching teacher’s video in July, I saw a style called “webkit-filter”, I didn’t know what it was, so I checked it and it turned out to be “filter”. -webkit-filter is used in Chrome 18, Safari 6,Opera 15, and -moz-filter (for Firefox). – Ms-filter (for IE 8-9) and wechat small program used in the case of filter can be used. Curious for a while, I tried several more functions. Here are detailed notes

define

filterAttributes define elements (usually), such as blur and saturation.

classification

  • None The default value has no effect.
  • Blur ()
  • Luminance brightness ()
  • Contrast () contrast
  • The drop shadow – ()
  • Grayscale () gray
  • Hue -rotate() Specifies the hue rotation
  • Invert () color
  • The transparency of the opacity ()
  • Saturate () saturation
  • Sepia () color restoring ancient ways
  • SVG filter url ()
  • The composite function is used in combination with multiple filters

use

Tip: Filters usually use percentages (e.g. 75%), but can also be expressed as decimals (e.g. 0.75).

blur

Gaussian blur: Blur (RADIUS), 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.

filter: blur(18px);
Copy the code

brightness

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 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.

filter: brightness(70%);
Copy the code

contrast

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.

filter: contrast(50%);
Copy the code

drop-shadow

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. Functions accept values of type (defined in CSS3 context), except that 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. The parameters are as follows:

These are the two values that set the shadow offset. 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. View possible units. If both values are 0, the shadow appears right after the element (if and/or is set, it will blur). (Optional) This is the third code> value. The larger the value, the more obscure the shadow will become larger and lighter. Negative values are not allowed. If not set, the default is 0 (sharp edge of shadow). (Optional) This is the fourth 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 will be the same size as the element). Note: Webkit, and some other browsers do not support the fourth length and will not render if it is added.

(Optional) View possible keywords and tags for the 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.

filter: drop-shadow(15rpx 15rpx 10rpx # 999999);
Copy the code

grayscale

Grayscale (100%) is black and white.

Grayscale: Convert an image to grayscale. 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.

filter: grayscale(60%);
Copy the code

hue-rotate

Hue: 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.

filter: hue-rotate(90deg);
Copy the code

invert

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.

The filter: invert (0.8);Copy the code

opacity

Transparency: The transparency of the converted 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.

filter: opacity(20%);
Copy the code

saturate

Saturation: 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.

filter: saturate(0%);
Copy the code

sepia

Brown: Vintage color converts 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.

filter: sepia(70%);
Copy the code

url

Create a text file filter. TXT with the following contents

<svg xmlns="http://www.w3.org/2000/svg"> 
	<defs> 
		<filter id="filter-primitives"> 
			<feGaussianBlur stdDeviation="3" /> 
			<feColorMatrix type="hueRotate" values="270"/> 
			<feColorMatrix type="saturate" values="0.75"/> 
			<feBlend mode="multiply"/> 
		</filter> 
	</defs> 
</svg>
Copy the code

Change the file suffix to.svg

Reference the SVG file in your code

<! --filter:url('SVG path # elemental-id')-->
style="filter:url('.. /.. /images/filters.svg#filter-primitives')"
Copy the code

Composite function

In the compound function, multiple filters are separated by Spaces. Note: Order is very important (for example, using grayscale() followed by sepia() will produce a full grayscale image).

filter: saturate(0%) drop-shadow(15rpx 15rpx 10rpx # 999999);
Copy the code

Specific code

demo