CSS Background and sprite diagram

This time to bring you CSS background and sprite diagram, the use of CSS background and the spirit of the attention of the diagram, the following is the actual case, take a look.

1. How do I set the background color of a label?

There is a Background-color: property in CSS that is specifically used to set the background color of the label.

Value:

Specific word RGB RGBA hex

Shortcut keys:

BC Background-color: #fff;

2. How do I set a background image?

There is a property called Background-image:url () in CSS that is specifically used to set the background image.

Shortcut keys:

Bi Background-image:url ();

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 a network-
Address

2. If the size of the picture is not larger than the size of the label, it will be automatically tiled horizontally and vertically to fill

3. If there is a picture on the page, then the browser will send again the request to get the image data

3. Background Tiling properties

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

Value:

Repeat default, tile is required both horizontally and vertically
No-repeat do not need to be tiled horizontally or vertically
Repeat-x only in horizontal direction tile
Repeat-y only in the vertical direction tile

Shortcut keys

BGR Background-repeat:

Application Scenarios:

You can reduce the size of the image by tiling the background image, and increase the speed of the page's access

4. Background Positioning properties

1. How do I control the position of the background image?

There is a CSS called Background-position: properties that are specifically used 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;
Remember to write the unit, that is, you must write the PX
Remember that specific pixels are capable of receiving negative numbers.

Shortcut keys:

bp background-position:0 0;

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

5. Background attribute abbreviation

1. Format of the background attribute abbreviation

Background: Background color background picture tiling way to locate the way;

Shortcut keys:

bg+ background: #fff URL () 0 0 no-repeat;

2. Note the point:

Background attribute, any one of the properties can be omitted

3. What is the background 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 modify the background correlation method?

In CSS, there is a property called Background-attachment, which is specifically used to modify the associated mode.

Format

Background-attachment:scroll;

Value:

Scroll default value, which scrolls as the scroll bar scrolls
Fixed does not scroll as the scroll bar scrolls

Shortcut keys:

Babackground-attachment:;

5. What is the difference between a background picture and an insert picture?

1. What is the difference between a background picture and an insert picture?

1.1

The background image is just a decoration and will not occupy the position (you can write other tags and content on it)
Inserting a picture takes place (no other labels or content can be written on it)

1.2

Background image has positioning properties, so it is convenient to control the location of the picture
Insert picture does not have positioning properties, all controls the position of the picture is not very convenient

1.3

The semantics of inserting a picture is better than the semantics of a background image, so if your image is to be indexed by search engines in enterprise development, then insert a picture is recommended.

6. CSS Sprite diagram

1. What is a CSS sprite diagram

CSS Sprite diagram is an image synthesis technique

2.CSS Sprite Diagram action

Can reduce the number of requests, and can reduce the server processing pressure

3. How to use the CSS sprite diagram

The sprite diagram of the CSS needs to be used in conjunction with background images and background positioning.

. box1{            width:110px;//Set wide and high            height:143px;            Background-position: -560px-216px; Set XY        }

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

IOS WebView How to load htmlstring

HTML5 a little knowledge that is easy to overlook