Shulou(Shulou.com)06/03 Report--

Xiaobian to share with you what are the filter attributes in CSS3, I believe most people still do not know how, so share this article for your reference, I hope you have a lot of gains after reading this article, let's go to understand it together!

The filter property of css3 allows photoshop-like effects on images in web pages, such as ground glass effects in the background, old photos (black and white photos), flame effects, etc.

Blur(px) Gaussian blur

brightness(%) brightness

contrast(%)

drop-shadow()

Note: this drop-shadow and box-shadow are both talking about shadows, but there is still a difference, see the picture below

The flame image in the picture is a png image. Except for the flame, the other parts are transparent. We can see that box-shadow adds shadow to the whole image, while drop-shadow only adds shadow to the opaque parts. This is the most important difference between them.

Grayscale(%)

hue-rotate(deg)

7. invert(%)

opacity(%) transparency

saturation (%)

X, sepia(%) Dark brown

The above only shows each filter separately, but they can actually be used together, such as this.

.all img{ filter: brightness(120%) contrast(110%) saturate(120%) hue-rotate(-25deg) drop-shadow(0 0 5px #000);}web front-end development learning Q-q-u-n: 731771211, sharing learning methods and small details that need attention, constantly updating the latest tutorials and learning methods (detailed front-end project actual teaching video, PDF)

Note: Saturation and contrast are two completely different concepts, saturation is the definition of color concentration (purity); contrast is the definition of the brightness of the picture.

Theoretically speaking, contrast refers to the level of black and white light and shade of the picture; saturation The vivid degree and level of color in the picture;

The above is all the content of this article "What are the filter attributes in CSS3?" Thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.