How to use a DIV to draw a picture through background-image overlay

Editor to share with you how to use a DIV drawing through background-image overlay to achieve, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

These pictures are all drawn with a DIV, but the principle is not complicated.

These pictures are all drawn by CSS and realized by background-image overlay.

For example, the realization of mushroom head is realized by the superposition of radial-gradient radial gradient and linear-gradient linear gradient, such as:

The code is as follows:

Div {width: 170px; height: 140px Background-image: radial-gradient (circle at 50120%, rgba) 23%, rgba) 48%), linear-gradient (30deg, rgba) 10%, rgba 20%), radial-gradient (circle at 50% 33%, # f8f6f7 32%, rgba 32%), radial-gradient (circle at-1355%, # f8f6f7 20%, rgba), radial-gradient (circle at 11355%, # f8f6f7 20%) Rgba (255, 255, 255, and 0), linear-gradient (to bottom, # ef0015 20%, # b2000c 100%) Border-radius: 140px 140px 80px 80px;}

At the same time, the occlusion relationship is realized through the background-image of before and: after pseudo elements.

The above is all the contents of the article "how to use a DIV to draw a picture through background-image overlay". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!