CSS3 implements a grid background, background-image,background-size

Using pure CSS3 to realize the grid background, what should be done?

You need to set the Background-image,background-size property to the container

. Container {            background-image:
Linear-gradient (RGBA (0, 0, 0.15) 10%, Rgba (0, 0, 0, 0) 10%);             background-size: 10px 10px;             width: 600px;             height: 300px;        }

The Background-image property sets the background image for the element.

The background of an element occupies the full dimensions of the element, including padding and borders, but excluding margins.

By default, the background image is in the upper-left corner of the element and repeats in both horizontal and vertical directions.

Background-size Specify the size of the background image

The general values are:

Length| percentage|cover|contain;

Length: Sets the height and width of the background image.

The first value sets the width, and the second value sets the height.

If you set only one value, the second value is set to "Auto".

Percentage: Sets the width and height of the background image as a percentage of the parent element.

The first value sets the width, and the second value sets the height.

If you set only one value, the second value is set to "Auto".

Cover: Expand the background image to be large enough to allow the background image to completely cover the background area.

Some parts of the background image may not appear in the background positioning area.

Contain: Expands the image image to the maximum size so that its width and height are fully adapted to the content area.

View Demo: HTTP://RUNJS.CN/DETAIL/GIPGR9QH

CSS3 implements a grid background, background-image,background-size