CSS background style

---------Color Representation method

Background:--

1) Red--English words

2) #ff0000--16 binary

3) RGB (255,0,0)--3 Yuan Color

4) RGB (100%, 0%, 0%)--percent

---------Background image start position

Background-origin:padding-box/border-box/content-box;

Picture border start inside margin start content

---------Background color start position

Background-clip:boder-box/padding-box/content-box;

Border start inner margin start content start

Example: A yellow border, such as a background color, starts with a border of yellow.

---------Setting the background picture size

Background-size: width px height px;

Background-size:length/percentage/cover/contain;

Value	Description
Length	Use numeric values to set the width and height of the image, the first value is the width, the second value is the height, and if only one value is set, the second is set to auto.
Percentage	Set the width and height of the image as a percentage, the first value is the width, the second value is the height, and if only one value is set, the second is set to auto.
Cover	Stretches the picture to fill an element with its own size proportions.
Contain	Stretch or shrink a picture in proportion to the size of the picture itself, but an element can completely display the picture

---------Background Color

Background/background-color: #000000-#FFFFFF/red blue green ...;

Insert a picture---------background

Background-image:url ("address")/excessive;

Example: Background-image:-webkit-linear-greadient (--,--,--)

---------Background Color Picture Overlay

background:red URL () no-repeat----;

---------Multi-background map

Background:url (') no-repeat----, url (') no-repeat----/----;

1 pic 2 picture/size

---------Background Color HSL

BACKGROUND:HSL (H, S, l);

H: Hue 0-Red 120-green 240-Blue 0-360

S: Saturation of 0-100%

L: Brightness 0-100% 0% is black

Tile---------Background image

Background-repeat:repeat/no-repeat/repeat-x/repeat-y;

Tile/uneven/horizontal tile/Vertical Tile

---------Background image positioning

Background-position: Horizontal px vertical px/horizontal% vertical%/Keywords (center center);

Top Left/top Center/top right-a/b azimuth before and after interchangeable

Left Center/center Center/right Center

Bottom Left/bottom Center/bottom Right

---------Background Association

Background-attachment:scroll/fixed/inherit; Scroll/PIN/Inherit

---------Single-Selection border

Border-left/top/right/bottom; Left/top/right/Bottom

---------Border Width

border-width:0–99999px;

Border-width:thin medium thick 10px;

The top border is a thin bounding box

The right border is a medium frame

The bottom border is a thick frame

The left border is a 10px wide frame.

3 value: up or down

2 value: up or down

---------Border Style

Border-style:solid/dashed/double/transparent

Solid lines/dashed lines/double solid lines/transparent

---------Border Color

Border-color: #000000-#FFFFFF/red blue green ...;

---------Border Compound style notation

border/border-left/...: Width style color; Line width style color

border:1px solid red;

---------background Compound style notation

Background:url ("path") repeat position; Path Tiling Location

Background:url ("a.jpg") no-repeat Center;

CSS Background style