The background image is tiled in portrait and landscape (default)
no-repeat
The background image is not tiled
repeat-x
The background image is tiled horizontally
repeat-y
The background image is tiled in portrait
Background position
background-position: length || length
background-position: position || position
parameter
value
length
Percentage | Length value consisting of floating point numbers and unit identifiers
position
top | center | bottom | left | center | right
The background-image attribute must be specified first
Position is followed by x and y coordinates. You can use position nouns or precise units.
If you specify two values, both of which are location names, the order of the two values is irrelevant, for example, left top and top left have the same effect
If only one orientation noun is specified, the other value is center-aligned by default.
If the position is followed by precise coordinates, then the first one must be x and the second must be y
If only one value is specified, the value must be the x coordinate, and the other is vertically centered by default
If the two specified values are a mixture of precise units and bearing names, the first value is the x coordinate and the second value is the y coordinate
Background attachment
background-attachment: scroll | fixed
parameter
effect
scroll
The background image is scrolled with the content of the object
fixed
Fixed background image
Shorthand
background: There is no mandatory standard for writing order of attribute values
Transparent background
background:rgba(0, 0, 0, 0.3);
The last parameter is the alpha transparency value range between 0 ~ 1
We are used to omit the 0 of 0.3 and write background like this: rgba (0, 0, 0, .3);
Note: The translucent background means that the background of the box is translucent, and the contents of the box are not affected.
Versions lower than ie9 are not supported.
Attributes
effect
value
background-color
background color
Predefined color values / Hexadecimal / RGB codes
background-image
Background picture
url (image path)
background-repeat
Whether to tile
repeat/no-repeat/repeat-x/repeat-y
background-position
Background location
length / position are the x and y coordinates respectively, remember that if there is a precise numerical unit, you must follow the wording of X followed by Y
background-attachment
The background is fixed or scrolled
scroll/fixed
Background shorthand
simpler
Background color background image address background tile background scroll background position; they have no order
Transparent background
Make the box translucent
background: rgba (0,0,0,0.3); must be followed by 4 values
