Detailed explanation of the background attribute of css style

background Detailed explanation of usage:

1, background-color AttributeSet the background color of the element

Possible Value

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

hex_number Specifies that the color value is a hexadecimal value Background color (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 The default background color is transparent

2, background-image The attribute sets the background of the elementImage

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 in pixels or percentage, color value in pixels or percentage...)

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

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

Radial gradient: background-image:-webkit(-repeating)-radial-gradient([08e6f6d89dd1803099e4ddb33bde4068 || 0c0cb308ee3d2ee3281772bfc9b806c2 ,]? [18b1d935585fae6b48e00ea5f5b48e2d || 971f671fe497569bdb0616a45a44dc0f,]? 9abf9243314f6d1cd71ac1087d19db3b, 9abf9243314f6d1cd71ac1087d19db3b[, 9abf9243314f6d1cd71ac1087d19db3b]*)

                                  -position>: The default is center

                                                                                                                                          ’ ‐ ’ s ’ s ’s ’ s ’ s ’ s ,                                                              to cover

3,

background-size

attributes are used to reset the size of the background image contain: shrink the background image to fit the label element

cover: The background image is enlarged and extended to the entire label element size

Pixels: Indicates the size of the background image scaling

Percentage: The percentage is based on the size of the content label element to scale the size of the image

4,

background-position

The attribute is used to set the background image position Possible values: left, right, top, bottom, center, pixels, percentage

5 ,

background-repeat

attribute is used to set the background image position Possible values: repeat,repeat-x,repeat-y,no-repeat,space (will not be cropped or resized ), round (will not be cropped but will change the image size)

6,

background-attachment

attributes are used to set whether the background image can be scrolled Possible values: scroll, fixed

7,

background-clip

attributes are used to specify the drawing area of ​​the background Possible values: b

ord

er-box,padding-box,content-box8,

background-origin

attributes are used to specify the position relative to which the background-position attribute is positioned Possible Value: border-box, padding-box, content-box

Extension: draw square

html code

e388a4556c0f65e1904146cc1a846bee使用背景绘制方格，使每个文字都在方格里，效果图如下。94b3e26ee717c64999d7867364b1b4a3

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;    
}

result

Use the background to draw a square grid so that each text is in the square grid. The rendering is as follows.

The above is the detailed content of Detailed explanation of the background attribute of css style. For more information, please follow other related articles on the PHP Chinese website!