Web Front-endCSS TutorialHow to use sprites in css? Introduction to background attribute (code example)How to use sprites in css? Introduction to background attribute (code example)
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
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>Rendering:
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;}Rendering:
?x-oss-process=image/resize,p_40 "153690995485532How 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 ;
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；
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!
A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AMHere's a container with some child elements:
Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AMFlyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should
Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee
Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AMIn this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.
Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AMThe short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.
Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AMIn this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties
IndieWeb and WebmentionsApr 19, 2025 am 11:16 AMThe IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
Dreamweaver Mac version
Visual web development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
