This is the 9th day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021.

4. CSS Background

4.1 Background Color (color)

His syntax format is:

Background-color: color value;Copy the code

4.2 Background Image (Image)

His syntax format is:

background-image: none | url (url) examples of / * * / background - image:url(images/demo.png);
Copy the code
parameter role
none No background (default)
url Specify the background image using an absolute or relative address

We advocate that the address behind the background image, the URL, not be quoted.

4.3 Background Tiling (repeat)

His syntax format is:

background-repeat : repeat | no-repeat | repeat-x | repeat-y 
Copy the code
parameter role
repeat Background image tiled vertically and horizontally (default)
no-repeat Background image not tiled
repeat-x The background image is tiled horizontally
repeat-y The background image is tiled lengthwise

4.4 Background Position

His syntax format is:

background-position : length || length
background-position : position || position 
Copy the code
parameter value
length Percentage of | consisting of floating point Numbers and the unit identifier length value
position Top | center | | bottom left | center | right orientation noun

Note:

  • Background-image must be specified first
  • Position is followed by the x and y coordinates. You can use azimuth nouns or exact units.
  • If you specify two values, both of which are azimuth names, the order of the two values is irrelevant. For example, left top and top left are the same
  • If only one orientation noun is specified, the other value is centered by default.
  • If position is followed by the exact coordinates, then the first one must be x and the second one must be y
  • If only one value is specified, that value must be the x coordinate, and the other is vertically centered by default
  • If the specified two values are a mixture of the exact unit and the bearing name, the first value is the x coordinate and the second value is the y coordinate

4.5 background attachment

Background attachment is to explain whether the background is scrolling or fixed. Its syntax format is:

background-attachment : scroll | fixed 
Copy the code
parameter role
scroll The background image is scrolling with the object content
fixed Background image fixation

4.6 background writing

Background: The order in which values of attributes are written is not officially mandatory. Background: background color background image address background tile background Scroll background position;

background: transparent url(image.jpg) repeat-y  scroll center top ;
Copy the code

4.7 Background Transparency (CSS3)

His syntax format is:

background: rgba(0.0.0.0.3);
Copy the code
  • The last parameter is alpha transparency and the value ranges from 0 to 1
  • Background: rgba(0, 0, 0,.3);
  • Note: background translucency refers to the box background translucency, the contents of the box is not affected
  • Since it is CSS3, versions lower than IE9 are not supported.

4.8 background summary

attribute role value
background-color The background color Predefined color values/hexadecimal /RGB codes
background-image The background image Url (Image path)
background-repeat Whether the tile repeat/no-repeat/repeat-x/repeat-y
background-position Background position Length /position are x and y coordinates, respectively. Remember that if you have an exact numeric unit, you must write x and y first
background-attachment Background fixed or scrolling scroll/fixed
Background shorthand More simple Background color Background picture address background tiled background Scroll background position; They have no order
The background transparent Make the box translucent Background: rgba (0,0,0,0.3); It must be followed by four values