Css rendering (3) color and background, css rendering color background

Css rendering (3) color and background, css rendering color background

The color application mainly consists of three parts: foreground color, background color, and transparency.

I. Foreground

Color

Color foreground

Value: <color> | inherit

Initial Value: the value specified by the user agent.

Apply to: All elements

Inheritance: Yes

In general, the foreground is the text of the element, but the foreground also includes the border around the element. There are two ways to directly affect the foreground color of an element. You can use the color attribute or the border-color attribute to set the border color.

Ii. Transparency opacity

Opacity is an attribute used by CSS3 to set transparency. opacity can only set one transparency for the entire element, and its transparency will be directly inherited from its child element.

Value: value | inherit

Value: The default value is 1, which can be any floating point number 0-1. Where, 1 indicates completely opaque, 0 indicates completely transparent

Initial Value: 1

Apply to: All elements

Inheritance: None

opacity: 0.8;

3. Background Color

[Note] All background attributes cannot be inherited.

Background Color

The background color background accepts all valid colors. The background color cannot be inherited. The default value is transparent.

background-color: red; 

Background Image

The background image is placed on the specified background color. The initial value is none.

background-image: url("image/1.jpg");

Tiled background

Space and round are newly added to css3. Space indicates that the two ends of the background image are aligned and tiled, and the extra space is replaced by blank space. round also indicates that the two ends of the background image are aligned and tiled, but the extra space is filled by stretching itself.

Value: repeat | repeat-x | repeat-y | no-repeat | space | round | inherit

background-repeat: repeat;

Background

Background position, initial value: 0% 0%

Value: <length> | left | center | right | top | center | bottom

Background-position: center; // The center of the graph and the center of the element are aligned with background-position: 10px 20px; // the horizontal direction is 10px and the vertical direction is 20px.

Crop background

The background-clip attribute is used to define the cropping area of the background image.

Value: background-clip: padding-box | border-box | content-box

Supports text attributes in the webkit kernel.

-Webkit-background-clip: text;

background-clip: content-box;

Background size

You can use the background-size attribute to specify the size of the background image, which can be used to control the horizontal and vertical scaling of the background image, or to control the way the image is stretched to cover the background area, you can even capture background images.

background-size: 20px 30px;