Detailed CSS style background properties

Background usage:

1. Background-color property sets the background color of the element

Possible values

color_name Specifies the color value as the color name of the background color (such as red)

hex_number A background color that specifies a hexadecimal value for the color value (such as #ff0000)

Rgb_number Specifies that the color value is the background color of the RGB code (such as RGB (255,0,0)

transparent default background color is transparent

2. Background picture of the Background-image property setting element

Possible values

Single Background Image: Background-image:url (a.png)

Multiple background images: Background-image:url (a.png), url (b.png)

Linear gradient: Background-image:-webkit (-repeating)-linear-gradient (direction, color value pixel or percent, color value pixel or percent ...)

Direction: Left,right,top,bottom,90deg,180deg

Color value pixel or percentage: yellow 10%,transparent 4px,rgb (0,0,0) 2px

Radial gradient: Background-image:-webkit (-repeating)-radial-gradient ([<bg-position> | | <angle>,]? [<shape> | | <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)

<bg-position>: Default to Center

<shape>:circle,ellipse

<size>:closest-side,farthest-side,closest-corner,farthest-corner,contain or Cover

3. The Background-size property is used to reset the background image size

Contain: Shrink the background image to fit the label element

Cover: Background image enlarges to the entire LABEL element size

Pixel: Size that indicates the size of the background image zoom

Percent: Percentage is the size of the content label element to scale the size of the picture

4. The Background-position property is used to set the background picture position

Possible values: left,right,top,bottom,center, pixels, percent

5. The Background-repeat property is used to set the background picture position

Possible values: Repeat,repeat-x,repeat-y,no-repeat,space (will not be clipped or resized), round (will not be cropped but will change image size)

6. The Background-attachment property is used to set whether the background picture can be scrolled

Possible value: scroll,fixed

7. The Background-clip attribute is used to specify the drawing area of the background

Possible value: Border-box,padding-box,content-box

8. The Background-origin attribute is used to specify where the Background-position attribute is positioned relative to

Possible value: Border-box,padding-box,content-box

Extension: Drawing Squares

HTML code

<p> use the background to draw squares, so that each text is in the square, as follows. </p>

CSS Code

p {     width:300px;     height:300px;     BORDER-LEFT:3PX solid pink;     BORDER-TOP:3PX solid pink;     Background-image:-webkit-linear-gradient (180deg, pink 3px, Transparent 3px),-webkit-linear-gradient (90deg, Pink 3px, Transparent 3px);     background-size:30px;     line-height:30px;     font-size:25px;     letter-spacing:5px;    }

Results

Use the background to draw squares, so that each text is in the square, as follows.