The CSS background (background)

“1. Background Color”

background-color: color value; The default value is transparentCopy the code

“2. Background Image”

Grammar:background-image: none | url (url) ; For example: background - the image:url(images/1.png);
Copy the code

3. Repeat

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. Position

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 you only specifyOne location noun, the other value defaults to center aligned.
  • If position is followed by the exact coordinates, then the first one must be x and the second one must be y
  • If you specify only one value, thenThe 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

Background shorthand

  • Background: There is no official standard for the order in which the values of attributes are written. For readability, the following is recommended:
  • Background color background image address background tile background scroll background position;
/* The background color of the image can not be written */
background: transparent url(image.jpg) repeat-y  scroll center top ;
Copy the code

“5. Translucent background (CSS3)”

background: rgba(0.0.0.0.3);
background: rgba(0.0.0.3);
Copy the code
  • Background-color: rgba(0, 0, 0,.3)
  • 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
  • Versions earlier than IE 9 are not supported
Box opacity
  • Any descendant of the opacity element is set to opacity along with it, and is used to adjust the overall opacity of an image or module
opacity:.2;
Copy the code

“6. 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