Range of grammar

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Browser compatibility

attribute Chrome Edge Firefox Safari Opera
filter Its – 18.0 Does not support 35.0 Its – 6.0 Its – 15.0

List of functions (extracted from the rookie tutorial)

Filter describe
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.
contrast(%) 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.
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. 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: (must) 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.
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.

Filter Example

  • blur

The larger the blur value is, the more obvious the blur effect is.

<img class ='img1' src="http://res.cngoldres.com/upload/usercenter/2018/0815/8491eefa4ec74270f51da3fde0032dca.jpg" alt="">

.img1{
    width:400px;
    -webkit-filter: blur(1px);
    filter: blur(1px);
}
Copy the code

⚠ ️ in useblurFunction will find a white edge around it. Add one for the parent containeroverflow:hiddenCan be solved. The following figure forblurEffect comparison at 5px:? Used in the middle of a small programblurAchieve Gaussian blur:

<view class='box'> <image src='http://5b0988e595225.cdn.sohucs.com/images/20180804/4cda37d211154f18afad7c2184f30115.jpeg'></image> </view> .box { width: 100%; overflow: hidden; } .box image { width: 100%; display: block; -webkit-filter: blur(10px); filter: blur(10px); The transform: scale (1.2); // Zoom in to 1.2x}Copy the code

  • brightness(%)

Use a percentage to set the brightness of the image. This function is intuitive.

 <img class='img1' src="http://5b0988e595225.cdn.sohucs.com/images/20180804/4cda37d211154f18afad7c2184f30115.jpeg" alt="">
 <img class='img2' src="http://5b0988e595225.cdn.sohucs.com/images/20180804/4cda37d211154f18afad7c2184f30115.jpeg" alt="">
 <img class='img3' src="http://5b0988e595225.cdn.sohucs.com/images/20180804/4cda37d211154f18afad7c2184f30115.jpeg" alt="">

.img1{
    width:400px;
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
}

.img2{
  width:400px;
  -webkit-filter: brightness(70%);
  filter:brightness(70%);
}

.img3{
  width:400px;
  -webkit-filter: brightness(100%);
  filter:brightness(100%);
}
Copy the code

  • drop-shadow(h-shadow v-shadow blur spread color)

value describe
h-shadow The level of the shadow
v-shadow Vertical shadow
blur The fuzzy value
spread Spread value
color Shadow color 
<img class ='img2'  src="http://5b0988e595225.cdn.sohucs.com/images/20180804/4cda37d211154f18afad7c2184f30115.jpeg" alt="">
.img2 {
  width: 400px;
  -webkit-filter: drop-shadow(8px 8px 10px gray);
  filter: drop-shadow(8px 8px 40px gray);
}
Copy the code

  • grayscale(%)

<img class='img1' src="http://5b0988e595225.cdn.sohucs.com/images/20180804/4cda37d211154f18afad7c2184f30115.jpeg" alt="">
<img class='img2' src="http://5b0988e595225.cdn.sohucs.com/images/20180804/4cda37d211154f18afad7c2184f30115.jpeg" alt="">
<img class='img3' src="http://5b0988e595225.cdn.sohucs.com/images/20180804/4cda37d211154f18afad7c2184f30115.jpeg" alt="">

.img1 {
  width: 400px;
   -webkit-filter: grayscale(100%)
  filter: grayscale(100%)
}

.img2 {
  width: 400px;
  -webkit-filter: grayscale(50%)
  filter: grayscale(50%)
}

.img3 {
  width: 400px;
  -webkit-filter: grayscale(0%)
  filter: grayscale(0%)
}
Copy the code

  • hue-rotate(deg)

Combined with CSS3 animation to achieve colorful dynamic pictures

<div class='intro'></div> .intro { width:400px; background: url("http://5b0988e595225.cdn.sohucs.com/images/20180804/4cda37d211154f18afad7c2184f30115.jpeg"), -webkit-linear-gradient(217deg, #e56420, #c22525, #3d9c31, #37bbde); background: url("http://5b0988e595225.cdn.sohucs.com/images/20180804/4cda37d211154f18afad7c2184f30115.jpeg"), linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde); height: 400px; background-size: cover; background-blend-mode: hard-light; -webkit-animation: hue-rotate 3s linear infinite; animation: hue-rotate 3s linear infinite; } @-webkit-keyframes hue-rotate { from { -webkit-filter: hue-rotate(0); -moz-filter: hue-rotate(0); -ms-filter: hue-rotate(0); filter: hue-rotate(0); } to { -webkit-filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg); -ms-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } } @keyframes hue-rotate { from { -webkit-filter: hue-rotate(0); -moz-filter: hue-rotate(0); -ms-filter: hue-rotate(0); filter: hue-rotate(0); } to { -webkit-filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg); -ms-filter: hue-rotate(360deg); filter: hue-rotate(360deg); }}Copy the code