How to use sprites in css? Introduction to background attribute (code example)-CSS Tutorial-php.cn

How to use sprites in css? Introduction to background attribute (code example)

青灯夜游

Release： 2018-09-14 15:55:46

Original

16388 people have browsed it

This chapter will introduce to you how to use sprites in CSS? Introduction to the background attribute (code example), so that everyone can understand how to use css sprite images (sprite images). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. How to use sprites in css?

Introducing how to use sprites. Before using them, we must first know what sprites are. Only when we first know what sprites are and understand the principles of sprites can we talk about using sprites.

1. What is a css sprite?

css sprite (sprite) is literally translated as "CSS sprite", also known as "CSS image sprite", "CSS map positioning" or "CSS picture sprite", "CSS image sprite" and "CSS image sprite". "Sprite image" is a web image application processing method. In fact, it is to include all the scattered pictures involved in a page into one large picture. In this way, when the page is accessed, the loaded pictures will not be displayed slowly one by one as before. .

2. How to use css sprite (sprite)

css sprite (sprite) is actually to merge multiple pictures into one picture, and then Lay out the background of web pages through CSS background positioning technology. When images need to be used, the current stage is to use the CSS attribute background-image combined with background-repeat, background-position, etc. to display the image.

3. Code implementation:

Sprite material used: incn.png

How to use sprites in css? Introduction to background attribute (code example)

Code:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文子居中</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.sprites{
				width: 200px;
				margin: 50px auto;
			}
			
			.sprites div {
				margin: 5px;
			}
			
			.sprites span {
				float: left;
				width: 20px;
				height: 20px;
				background-image: url(How to use sprites in css? Introduction to background attribute (code example));//引用精灵图（sprite）：incn.png
				background-size: 60px 40px;
			}
			
			.sprites1 {
				background-position: 0 0;
			}
			
			.sprites2 {
				background-position: -20px 0;
			}
			
			.sprites3 {
				background-position: 0 -20px;
			}
			
			.sprites4 {
				background-position: -20px -20px;
			}
			
			.sprites5 {
				background-position: -40px 0;
			}
			
			.sprites6 {
				background-position: -40px -20px;
			}
		</style>
	</head>

	<body>
		<div class="sprites">
			<div><span class="sprites1"></span>付款图标</div>
			<div><span class="sprites2"></span>存款图标</div>
			<div><span class="sprites3"></span>删除图标</div>
			<div><span class="sprites4"></span>粘贴图标</div>
			<div><span class="sprites5"></span>笑脸图标</div>
			<div><span class="sprites6"></span>编辑图标</div>
		</div>
	</body>

</html>

Copy after login

Rendering:

How to use sprites in css? Introduction to background attribute (code example)

Core code used:

background-image: url(How to use sprites in css? Introduction to background attribute (code example)) ;---Set the background image for the span element in sprites, referencing the sprite image (incn.png);

background-size: 60px 40px; ---Adjust the size of the background image, Make the background image of the span element of the sprites box fixed to width (60px) and height (40px);

background-position attribute --- this is the most critical code, image positioning. Sets or retrieves the background image position of the span element of the sprites box. The background-image attribute must be specified before it can be used.

Description: The background background-position has two values. The first one represents the distance value to the left (can be positive or negative), and the second value represents the distance value to the top (can be positive or negative). . When it is a positive number, it represents the distance to the left and above when the background image is used as the background image of the object box. When it is a negative number, it represents the background image as the background image of the box object. Drag the background image beyond the left side of the box object. How far beyond the top of the box object is the drag to start displaying this background image.

2. Introduction to other attribute values of the css background attribute

In addition to the above background-image, background-size, background-position, the background attribute In addition to attribute values, there are other attribute values, such as:

1.background-color: Defines the background color of the element. Generally, a solid color background is defined.

body {background-color:#b0c4de;}

Copy after login

Rendering:

How to use sprites in css? Introduction to background attribute (code example)

body {background-color:#b0c4de;}Set the background color of the entire page to: #b0c4de

In CSS, color values can usually be defined in the following ways:

Hex - such as: "#ff0000";

RGB - such as: "rgb (255,0,0)";

Color name - such as: "red".

2. background-repeat: Defines the tiling method of the background image (horizontally or vertically, not tiling).

Syntax:

background-repeat：repeat-x || repeat-y || no-repeat ;

Copy after login

repeat-x: horizontal tiling;

repeat-y: vertical tiling;

no-repeat: no tiling.

3. background-attachment: Set whether the background image is fixed or scrolls with the rest of the page.

Syntax:

background-repeat：scroll || fixed || inherit；

Copy after login

scroll: Default attribute, set the background image to scroll with the rest of the page;

fixed: Set the background image to be fixed;

inherit: Specifies that the settings of background-attachment should be inherited from the parent element;

The above is the detailed content of How to use sprites in css? Introduction to background attribute (code example). For more information, please follow other related articles on the PHP Chinese website!