On the novel coronavirus pneumonia day ago, on April 4th, many websites and APP became gray. At that time, these websites and APP were too interested. I always thought this was a set of topics. Later I checked the implementation method. It turns out that css3 has an attribute filter, which can be implemented in one line of code. After knowing this way, I just remember it in my mind and didn't write it down. A few days ago, there was a demand that the pop-up background should be made fuzzy and translucent. After checking the implementation method, the filter attribute was still used. I felt it was necessary to record this attribute, deepen my memory and share it with you.
1. Theme turns grey
First look at the renderings. Normally
After graying
In fact, the implementation method is very simple. The filter attribute of css3 is used to directly access the code:
#box{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); }
Set this style for the outermost div, and the whole station will be grayed out.
2. The effect of blurred and translucent pop-up background
The design drawing is like this. The background of the pop-up window should be translucent, and you can see the things at the bottom, but the things at the bottom must be fuzzy.
The implementation of this effect is also very simple. The filter property is still used. The specific code is as follows:
.bg{ -webkit-filter: blur(3px); /* Chrome, Safari, Opera */ filter: blur(3px); }
When I use these two effects, I feel that this filter is too powerful and easy to use. Just look up the data and learn this filter. It's amazing. It can not only achieve the above two effects, but also many other effects. Let's record what I learned.
// Set Gaussian blur, the larger the value, the more blur .blur { -webkit-filter: blur(4px); filter: blur(4px); } // Apply a linear multiplication to the picture to make it look 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. A value of more than 100% is OK, and the image will be brighter than before. // If there is no set value, the default is 1. .brightness { -webkit-filter: brightness(30%); filter: brightness(30%); } // 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. // A value of more than 100% means a lower contrast will be used. // If no value is set, the default is 1. .contrast { -webkit-filter: contrast(180%); filter: contrast(180%); } // Converts an image to a grayscale image. Value defines the scale of the conversion. // When the value is 100%, the image is completely grayscale, // The value is 0% and the image does not change. // A value between 0% and 100% is the linear multiplier of the effect. // If it is not set, the default value is 0; .grayscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); } // Apply color rotation to the image. // The value of "angle" sets the value of the color ring angle 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, a value over 360deg is equivalent to another round. .huerotate { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); } // Inverts the input image. Value defines the scale of the conversion. // 100% value is completely reversed. // A value of 0% does not change the image. // Values between 0% and 100% are linear multipliers of the effect. // If the value is not set, the default value is 0. .invert { -webkit-filter: invert(100%); filter: invert(100%); } // The transparency of the converted image. Value defines the scale of the conversion. // A value of 0% is completely transparent, // A value of 100% does not change the image. // A value between 0% and 100% is the linear multiplier of the effect, which is also equal to the image sample times the number. // If the value is not set, the default value is 1. // This function is very similar to the existing opacity attribute. The difference is that some browsers will provide hardware acceleration in order to improve performance through filter. .opacity { -webkit-filter: opacity(50%); filter: opacity(50%); } // Converts image saturation. Value defines the scale of the conversion. // A value of 0% is completely unsaturated, // A value of 100% does not change the image. // Other values are linear multipliers of the effect. A value of more than 100% is allowed, and there is a higher saturation. // If the value is not set, the default value is 1. .saturate { -webkit-filter: saturate(7); filter: saturate(7); } // Converts the image to a dark brown color. Value defines the scale of the conversion. // A value of 100% is completely dark brown, // The value is 0% and the image does not change. // A value between 0% and 100% is the linear multiplier of the effect. // If it is not set, the default value is 0; .sepia { -webkit-filter: sepia(100%); filter: sepia(100%); }