【 Solid Base –CSS】= > Background

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

4. Position

background-position : length || length
background-position : position || position 
Copy the code

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”