How to draw graphics using css background (code attached)

The content of this article is about how to use CSS background to draw graphics (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I believe that in your daily work, you will inevitably be asked to add some special background images to certain elements. At this time, you usually pick up PS and just do it. Not to mention that this method is troublesome, it is already good if UI cuts it for you, but if not, you can do it yourself. There may also be situations where you need to cut an entire oversized picture. As an "excellent" front-end, in line with the concept of having enough food and clothing by yourself, let me introduce to you how to use background to draw these special pictures

Let's first take a look at what usually appears

When encountering this situation, the usual solution is to cut the following picture

and then pass it through Use css to get

<div></div>

<style>
  .box{
    width: 500px;
    height: 500px;
    background: url(&#39;imgurl&#39;);
    background-size: 20%;
  }
</style>

Of course, don’t cut the image now, just use css to do it directly

.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
                linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0,
                linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px,
                linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 100px 50px;
    background-size: 100px 100px;
    background-color: #fff;
}

We can see that we will get exactly the same effect as cutting the image

Let’s see next Why is the above css written like this?
First, let’s understand background: linear-gradient(). In background, CSS3 gradients can be regarded as a background image, which can be understood as background: url(), and the background image can be multiple pictures, correspondingly we can write multiple linear-gradients and splice them into an independent picture block by controlling their colors. The background-size refresh can be separated by commas, and the corresponding linear-gradient will be set in a loop.
It should be noted here that linear-gradient is drawn from back to front, which means that the front color will cover the back color.

Analyzing the grid background above, I think it can be seen as a 4x4 grid with two 1x1 gray grids covering it. Each gray grid can be assembled from the basic pattern of

, so we have the following

background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
            linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px;

There is a problem here. There are gaps between the small triangles, so use the

graphics to join them again.

background: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb),
            linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 50px,
            linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 50px 0,
            linear-gradient(135deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb) 100px 50px;

Finally we can get the same grid background as above.
More examples

Sometimes the background we need may not require repeat, and the graphics have no rules
For example:

At this time we need to set each corner of the graphic separately.

.box{
    width: 500px;
    height: 500px;
    background: linear-gradient(black, black) left top,
                linear-gradient(black, black) left top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right top,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) right bottom,
                linear-gradient(black, black) left bottom,
                linear-gradient(black, black) left bottom;
    background-repeat: no-repeat;
    background-size: 4px 20px, 20px 4px;

The principle is actually to draw each graphic through linear-gradient and set the position and size, and finally you can get the desired image.

In the future, when we encounter some special background images, we can implement it through css.

The above is the detailed content of How to draw graphics using css background (code attached). For more information, please follow other related articles on the PHP Chinese website!