CSS background of some small common sense

Source: Internet
Author: User
I. How to set the background color of a label
There is a Background-color: property in CSS that is specifically used to set the background color

Value:
A specific word
Rgb
Rgba

Hexadecimal

two. How do I set a background image?
in CSS, there is a property called Background-image, which is designed to set the background image.

Note the point:
1. The address of the image must be placed in the URL (), the address of the picture can be a local address, or it can be the address of the network
2. If the size of the picture is not large, it will be automatically tiled and filled in both horizontal and vertical directions.
3. If a picture appears on the page, the browser will send the request again to get the picture

three. How do I control how the background image is tiled?
There is a Background-repeat property in CSS that is specifically used to control how the background image is tiled.

Value:
repeat default, tile in both horizontal and vertical directions
no-repeat uneven in both horizontal and vertical directions
repeat-x Tile in horizontal direction
repeat-y Tile in vertical direction

Application Scenarios:
you can reduce the size of the image by tiling the background image, and increase the speed of the page's access

four. How do I control the position of the background image?
There is a background-position property in CSS that is designed to control the position of the background image

2. Format
background-position: horizontal vertical direction;

3. Take the value
3.1 Specific bearing nouns
Horizontal direction: Left center right
Vertical direction: top Center Bottom

3.2 specific pixels
For example: background-position:100px 200px;
Be sure to write the unit, i.e. PX
The specific pixel is a negative number.

Note the point:
the same label can set the background color and background picture at the same time, if the color and the picture exist simultaneously, then the picture will overwrite the color

Five. Format of the background attribute abbreviation
background: Background color background picture tiling way to locate the way;

2. Attention Points
background attribute, any one of the properties can be omitted

3. What is the correlation method?
by default, the background picture scrolls as the scroll bar scrolls, and if you do not want the background picture to scroll with the scroll bar scrolling, then we can modify the background picture and scroll bar Association

4. How do I change the context?
There is a background-attachment property in CSS that specifically modifies how the background is associated

format
Background-attachment:scroll;
Take value
Scroll default value, which scrolls as the scroll bar scrolls
fixed does not scroll as the scroll bar scrolls

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.