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