This is the 19th day of my participation in the August More Text Challenge

Following the next chapter — CSS3 border, this article introduces the new properties of background and gradient function, and takes a look at the new background element control and the realization of various gradient effects.

Background Background

Background is short for multiple background properties,

backgrounf: [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin], ... ;Copy the code

Note: If background-size is present, it must be followed by background-position and separated by a “/”.

background-image

The background-image attribute can be used to add multiple background images. Different background images and images are separated by commas. The one displayed at the top of all images is the first one. Set up multiple PNG images, you can create multiple background overlay effect.

background-image: url(".. /.. /media/examples/lizard.png"),
  url(".. /.. /media/examples/star.png");
Copy the code

Suggestion: When using the background image, it is best to set the background color (background-color) as planB when the background image is not supported.

background-size

Before CSS3, the background image size was determined by the actual size of the image. In CSS3, the background-size property can specify the size of the background image, either in pixels or as a percentage (the size as a percentage of the width and height of the parent element).

Images can keep their original size, or stretch to a new size, or scale to the size of the element’s available space while keeping their original proportions:

  • cover: Keep the width to height ratio of the image, zoom the background image to completely cover the background area, maybe part of the background image is not visible.
  • contain: Keep the width to height ratio of the image, scale the background image to fully fit the background area, maybe the background area is partially blank.
  • A value: This value specifies the width of the image. The height of the image is implicitly auto
  • Two values: the first value specifies the width of the picture, and the second value specifies the height of the picture

background-origin

Background-origin specifies the relative area of the background that specifies the origin position of the background-image attribute of the background image.

Note: This property will be ignored when background-attachment is fixed.

  • border-boxThe background image is placed in the border area as a reference
  • padding-boxThe placement of the background image is referenced by the padding area
  • content-boxBackground images are placed in the Content area as a reference

background-clip

The background-clip background clipping property is the area to draw the background (background image or color).

  • border-boxThe background area extends to the border (but below it)
  • padding-boxThe background area extends to the inner margin
  • content-boxThe background area extends into the content area
  • text: Foreground scenery with the background cropped to text. You need a prefix-webkit-background-clip: text;

The Gradient Gradient

CSS3 gradients allow for smooth transitions between two or more specified colors. Gradients cut down on download time and broadband usage, and look better when zoomed in.

A linear gradient

The color values gradually transition along an implicit straight line. Generated by Linear-gradient ().

To create a linear gradient, you must define at least two color nodes. Color nodes are the colors that you want to render smooth transitions. You can also set a starting point and a direction (or Angle).

/* The gradient axis is 45 degrees, from blue to red */ Linear-gradient (45deg, blue, red); /* Linear gradient(to left top, blue, red); /* Linear gradient(to left top, blue, red); /* Linear gradient(0deg, blue, green 40%, red); /* Linear gradient(0deg, blue, green 40%, red);Copy the code

grammar

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )
Copy the code
  • <angle>: Specifies the direction (or Angle) of the gradient with an Angle value. The Angle increases clockwise.
  • <side-or-corner>: Describes the starting point of the gradient line.to top.to bottom.to left 和 to rightThese values are converted to angles0 degrees,180 degrees,270 degrees 和 90 degrees. The remaining values are converted to an Angle that rotates clockwise from the top center. The end point of a gradient line is symmetric with its starting center.
  • <color-stop-list>: Color change list. Support transparency (Rgba (255,0,0,0.1)).

Radial gradient

The radial-gradient() CSS function creates an image whose color values spread out from a central point (the origin) and gradually transition to other color values.

You also need to define at least two color nodes. You can also specify the center of the gradient (default: center), shape (default: ellipse), and size (default: farthest corner).

grammar

radial-gradient(
  [shape size at position] ?
  <color-stop-list> [ , <color-stop-list> ]+
)
Copy the code
  • shape: oval (ellipse, default) or circular (circle)
  • size:
    • closest-sideThe edge shape of the gradient is tangent to the side of the container closest to the center of the gradient (circle) or at least to the vertical and horizontal sides closest to the center of the gradient (ellipse).
    • closest-cornerThe edge shape of the gradient intersects the corner of the container closest to the center of the gradient.
    • farthest-sideOpposite to closest side, the edge shape is tangent to the part of the container that is furthest from the center of the gradient (or the vertical and horizontal sides that are furthest).
    • farthest-cornerThe edge shape of the gradient intersects the corner of the container farthest from the center of the gradient.
  • position: can be two specific position offsets (10% 20%), can also be keywords (left, right, top, bottom)

Repeat the gradient

Repeat the gradient pattern several times until it is sufficient to fill the specified element. Generated by repeating-Linear-gradient () and repeating-radial-gradient() functions.

The parameters of the repeat function are the same as above, except that it is repeated in multiples of the gradient length (the distance between the last color code and the first one).

.linear-repeat {
  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}

.radial-repeat {
  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}
Copy the code

Brief introduction to the new characteristics of CSS3

  • Border Border
  • Background & Gradient
  • Text Indicates the Text & @font-face
  • Transform element Transform
  • Transition effect
  • Animation Animation
  • Column Multi-column layout
  • Resize & Box-sizing & Outline-offset
  • Images into the order
  • Button in the advanced
  • Multimedia Query