#background-image

Defines an image as the background of the element.

默认属性 background-image: none;

Removes any background image.

background-image: url(/images/jt.png);

Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.parryqiu.com/images/jt.png).

background-image: linear-gradient(red, blue);

You can define a linear gradient as the background image.

You need to define at least two colors. The first one will start at the top, the second one at the bottom.

The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.

background-image: linear-gradient(45deg, red, blue);

You can specify an angle, either in degrees, or with keywords.

When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.

In this example, 45deg means 2:30, or the top right corner.

background-image: radial-gradient(green, purple);

You can define a radial gradient as the background image.

You need to define at least two colors. The first one will be at the center, the second one at the edges.

background-image: radial-gradient(circle, green, purple);

You can specify the shape of the radial gradient: circle or ellipse (default).

background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);

You can specify color stops using percentage values.

background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);

You can specify where the gradient should end:

  • closest-side
  • closest-corner
  • farthest-side
  • farthest-corner

background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);

Like with the background-position, you can specify the position of the gradient.