Home > Article > Web Front-end > 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. Value3.1 Specific orientation nounHorizontal 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
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 calledbackground-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 scrollsfixed will not scroll as the scroll bar scrolls
5. The difference between background pictures and inserted pictures?
1.Background pictures and The difference between inserting pictures?1.1The 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)
The inserted image does not have positioning attributes, all controls for the image The location is not convenient
6. CSS sprites
1. What are CSS spritesCSS sprites are an image synthesis technology2 .The role of CSS spritescan reduce the number of requests and reduce server processing pressure3. How to use CSS spritesCSS 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!