CSS Rendering (iii) colors and backgrounds

Color applications are mainly divided into the foreground color, background color and transparent three parts.

First, the foreground scenery

Color

Color foreground color

Value: <color> | Inherit

Initial value: User Agent-specific value

Applies to: all elements

Inheritance: There are

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 property, or you can use the property border-color to set the border color.

Second, transparency opacity

Opacity is a property that is specifically used to set the transparency in CSS3, opacity can only set a transparency for the entire element, and its transparency inherits directly from its descendant elements

Values: Value | Inherit

Value: The default value is 1, which can fetch 0-1 of any floating-point number. Where 1 means completely opaque and 0 is completely transparent

Initial value: 1

Applies to: all elements

Inheritance: None

opacity:0.8;

Three, the background color

[note] All background properties are not inherited

Background color

The background color background accepts all valid colors, the background color cannot inherit, and its default value is transparent.

Background image

Background image Background-image will be placed above the specified background color , initial value: None

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

Background tile

The background tile property values in space and round are CSS3 new values. Space indicates that both sides of the background image are flush-paved, and the extra spaces are replaced with blanks; round also indicates that the background image is flush at both ends, but the extra space is filled by stretching itself.

Value: Repeat | Repeat-x | repeat-y | No-repeat | Space | Round | Inherit

Background-repeat:repeat;

Background positioning

Background positioning background-position, initial value: 0% 0%

Value: <length> | Left | Center | Right | Top | Center | Bottom

Background-position:center;        The middle of the figure and the middle of the element align background-position:10px 20px;     Horizontal direction 10px, vertical direction 20px

Background cutting

The background trim (Background-clip) property is used to define the clipping area of the background image.

Value: Background-clip:padding-box | | Border-box | | Content-box

Support for the Text property under the WebKit kernel

-webkit-background-clip:text;

Background-clip:content-box;

Background size

Use the background dimension (Background-size) property to specify the size of the background picture, you can control the background picture in both horizontal and vertical two directions, you can also control how the picture stretches over the background area, and can even intercept the background image.

background-size:20px 30px;

CSS Rendering (iii) colors and backgrounds