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

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

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

4. How to modify the background association method?

background-attachment in CSS. This attribute is a

fixed will not scroll as the scroll bar scrolls

5. The difference between background pictures and inserted pictures?

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

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

6. CSS sprites

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

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!