There are minimum and maximum widths.

Compound attribute backgroundbackground

  1. background-colorThe background color

Values: Color name/hexadecimal # RRGGBB/RGB function /tansparent/inherit

  1. background-imageThe background image

Value: None /inherit/url

  1. background-repeatWhether or how the background image repeats

Value: repeat/repeat – x/repeat – y/no – repeat/inherit

  • If there is a background-image then there might be a background-repeat
  • If it’s no longer in background-image then there must be no background-repeat
  1. background-attachmentWhether the background image moves as the content moves

Value: scroll/fixed/inherit

  1. background-position

Background image horizontal and vertical position

Value: position parameter/length/percentage

Background is a combination of five attributes: a collection of the above five attributes

Ul > LI *12: Automatic generation Generates 12 LI labels at the UL level

1.background-imageDetailed interpretation of the

<ul style="background-color: tan; width: 500px;" > <li style="width: 700px; background-color: red;" >1<li> <! "> < span style=" color: #000000; >2<li> <li style="background-color: #ffffff;" >2<li> <! "> < span style=" color: #ff0000; >2<li> <li style="background-color: #f00;" >2<li> <! < span style=" color: RGB (255, 0, 0); font-size: 14.0px; white-space: normal; background-color: RGB (255, 0, 0);" Box-sizing: border-box! Important; word-wrap: break-word! Important;" > < span style=" color: RGB (255, 255, 0, 0.5); >3<li> <! < style="background-color: RGB (255, 0, 0); background-color: RGB (255, 0, 0); Opacity: 0.5;" >3<li> <! Transparent indicates the default background color of the tag --> <li>4<li> <! "> < span style=" color: inherit; width: 800px;" >4<li> </ul>Copy the code

2. background-imageandbackground-repeat

Background-image Indicates the background image

  • Value:none/inherit/url(Picture path)

Background-repeat Whether or how the background image repeats

  • Value:repeat/repeat-x/repeat-y/no-repeat/inherit
<! <div style="width: 800px; height: 800px; background-image: url(img/bg_big.png);" ></div> <div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-repeat: repeat;" ></div> <div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-repeat: no-repeat;" ></div> <div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-repeat: repeat-x;" ></div> <div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-repeat: repeat-y;" ></div> <div style="width: 200px; height: 200px; background-image: url(img/bg_big.png);" ></div> <div style="width: 200px; height: 200px; background-image: url(img/bg_big.png); background-size: 100%;" ></div> <div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-size: 100%;" ></div>Copy the code

3. background-attachment

Whether the background image moves as the content moves

Value: scroll/fixed/inherit

<body style="background-image: url(img/bg_big.png); background-repeat: no-repeat"> <! -- Scroll defaults to scroll --> <! -- Fixed --> <! "> <div style="width: 200px; height: 2000px; background-color: tan; background-attachment: fixed;" ></div> </body>Copy the code

4. background-position

The horizontal or vertical position of the background image

Value: Parameter/length/percentage

<! Background-position: y x; y center/top/bottom x center/left/right ---> <div style="width: 200px; height: 200px; background-image: url(img/bg_small.png); background-repeat: no-repeat; background-position: center left;" ></div> <! -- border 1px border width solid line black color see border details --> <! -- a value of 10px x offset 10px y centered --> <! -- X offset 10px to the right --> <! <div style="border: 1px solid black; height: 200px; background-image: url(img/bg_small.png); background-repeat: no-repeat; background-position: 10px 5px;" ></div> <! -- a value of 50% up, down, left, and right offsets to 50% --> <! -- X offset to 50%-- > <! <div style="border: 1px solid black; height: 200px; background-image: url(img/bg_small.png); background-repeat: no-repeat; background-position: 50% 10%;" ></div>Copy the code

The wheel map arrow button is a whole map. Hover to display other images.

<! <div style="width: 200px; height: 200px; background-image: url(img/left_right_arrow.png); background-repeat: no-repeat; background-position-x:;" ></div> <! <div style="width: 44px; height: 60px; background-image: url(img/left_right_arrow.png); background-repeat: no-repeat; background-position-x: -88px;" ></div>Copy the code

Legend of arrow in wheel casting diagram:

demo

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title></title> <! "> <div style="width: 100px; height: 100px; background: #1e80ff;" >1</div> <div style="border: 1px solid black; width: 100px; height: 100px; background: url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg);" >2</div> <div style="border: 1px solid black; width: 100px; height: 100px; background: url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg) no-repeat;" >3</div> <div style="border: 1px solid black; width: 100px; height: 100px; background: #e8f3ff url(https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg) no-repeat center center;" >4</div> </head> <body> </body> </html>Copy the code

About the color

The CSS specification defines 147 color names, 17 standard colors, and 130 other colors.

tan/teal/thistle/tomato/turquoise/ darkmagenta/darkslategray/lightcoral/lightcyan/lightslmon/lightseagreen/ red/darkgoldenrod/darkred/indianred/mediumvioletred/orangered/palevioletred/ gray/darkgray/darkslategray/dimgray/lightslategray/slategray/ black/blanchedalmond/blue/blueviolet/burlywood/aliceblue/cadetblue/darkblue/darkslateblue/ aliceblue/antiquewhite/aqua/aquamarine/azure/beige/bisque/black/blanchedalmond/blue/ solid/saddlebrown/salmon/sandybrown/snow/crimson/darksalmon/gainboro/lightsalmon/mistyrose/rosybrown