CSS background and sprites

This time I will bring you CSS backgrounds and sprites. What are the precautions for using CSS backgrounds and sprites? The following is a practical case, let’s take a look.

1. How to set the background color of the label?

There is a background-color: attribute in CSS, which is specially used To set the

value of the label's background color:

Specific word rgb rgba hexadecimal

Shortcut key:

bc background-color: #fff;

2. How to set the background image?

There is a property called background-image: url(); in CSS , which is the

shortcut key specially used to set the background image:

bi background-image: url();

Notes:

1. The address of the image must be placed in url(). The address of the image can be a local address or a network address-
Address

2. If the size of the image is not as large as the size of the label, then it will Automatically tile horizontally and vertically to fill

3. If there is a picture on the web page, the browser will send a request again to obtain the data of the picture

3. Background tiling attribute

There is a background-repeat attribute in CSS, which is specifically used to control the tiling method of background images.

Value:

repeat Default, tiling is required in both horizontal and vertical directions
no-repeat No tiling is required in both horizontal and vertical directions
repeat-x Only tiling in the horizontal direction
repeat-y Only in the vertical direction Tile

Shortcut key

bgr background-repeat:

Application scenario:

You can reduce the size of the image by tiling the background image, improve Web page access speed

4. Background positioning attribute

1. How to control the position of the background image?

There is a property called ## in CSS #background-position: Property, which is specifically used to control the position of the background image

2. Format:

background-position: horizontal direction vertical direction;

3. Value

3.1 Specific orientation noun

Horizontal direction: left center right
Vertical direction: top center bottom

3.2 Specific pixel

For example: background- position: 100px 200px;
Remember to write the unit, that is, you must write px
Remember that specific pixels can receive negative numbers

Shortcut key:

bp background-position: 0 0;

Note:

The same tag can set the background color and background image at the same time. If the color and the image exist at the same time, the image will overwrite the color

5. Background attribute abbreviation

1. The format of background attribute abbreviation

background: background color, background image tiling method, association method, positioning method;

Shortcut keys:

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

2. Note:

In the background attribute, any attribute can be omitted

3.What is the background correlation method?

By default, the background image will scroll as the scroll bar scrolls. If you don’t want the background image to scroll as the scroll bar scrolls, then we can modify the association between the background image and the scroll bar

4. How to modify the background association method?

There is an attribute called

background-attachment in CSS. This attribute is a

format

specially used to modify the association method. background-attachment: scroll;

Value:

scroll Default value, will scroll as the scroll bar scrolls

fixed will not scroll as the scroll bar scrolls

Shortcut key:

babackground-attachment:;

5. The difference between background pictures and inserted pictures?

1.Background pictures and The difference between inserting pictures?

1.1

The background picture is just a decoration and will not occupy the position (you can write other tags and content on it)

Inserting the picture will occupy the position (not allowed) Write other tags and content on it)

1.2

The background image has positioning attributes, so you can easily control the position of the image

The inserted image does not have positioning attributes, all controls for the image The location is not convenient

1.3

The semantics of inserting pictures are stronger than the semantics of background pictures, so if your pictures want to be included by search engines in enterprise development, it is recommended to use insert pictures

6. CSS sprites

1. What are CSS sprites

CSS sprites are an image synthesis technology

2 .The role of CSS sprites

can reduce the number of requests and reduce server processing pressure

3. How to use CSS sprites

CSS sprites need to match the background image and background positioning to use

.box1{
            width: 110px; //设置宽高
            height: 143px;
            background-position: -560px -216px; //设置xy
        }

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to load HTMLString in iOS webView

html5 little knowledge that is easily overlooked

The above is the detailed content of CSS background and sprites. For more information, please follow other related articles on the PHP Chinese website!