Detailed explanation of CSS image splicing technology (sprite image)
|
CSS image splicing technology 1. Image stitching
With CSS styles, we can display the part of the image we need The detailed code is as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Image Integration</title>
<style>
.box{
width:200px;
margin:0 auto;
overflow:hidden;
}
.iton{
width:43px;
margin-left:10px;
height:44px;
float:left;
background:url(images/img_navsprites_hover.gif) no-repeat;
}
.span01{
background-position:0 0;
}
.span02{
background-position:-47px 0;
}
.span03{
background-position:-91px 0;
}
.span01:hover{
background-position:0 -45px ;
}
.span02:hover{
background-position:-47px -45px ;
}
.span03:hover{
background-position:-91px -45px ;
}
</style>
</head>
<body
<div class="box">
<span class="iton span01"></span>
<span class="iton span02"></span>
<span class="iton span03"></span>
</div>
<body>
</html> The running results are as follows:
This effect adds a floating style when the mouse hovers over the element, and sets the background-position to change the position of the image to continuously update. Welcome to give your advice! The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: W3C Tutorial (5): W3C XML Activities
>>: How to implement batch deletion of large amounts of data in MySQL large tables
Recommend
Detailed process of Vue front-end packaging
Table of contents 1. Add packaging command 2. Run...
What is web design
<br />Original article: http://www.alistapar...
Example code for configuring monitoring items and aggregated graphics in Zabbix
1. Install Zabbix Agent to monitor the local mach...
Detailed explanation of 10 common HTTP status codes
The HTTP status code is a 3-digit code used to in...
How to Install Oracle Java 14 on Ubuntu Linux
Recently, Oracle announced the public availabilit...
Detailed explanation of query examples within subqueries in MySql
Where is my hometown when I look northwest? How m...
MySQL stored procedure in, out and inout parameter examples and summary
Stored Procedures 1. Create a stored procedure an...
MySQL grouping queries and aggregate functions
Overview I believe we often encounter such scenar...
Analysis of the process of implementing Nginx+Tomcat cluster under Windwos
Introduction: Nginx (pronounced the same as engin...
Installation and use of Linux operation and maintenance tool Supervisor (process management tool)
1. Introduction Supervisor is a general process m...
Multiple solutions for cross-domain reasons in web development
Table of contents Cross-domain reasons JSONP Ngin...
Implementation of mysql decimal data type conversion
Recently, I encountered a database with the follo...
A brief analysis of understanding Vue components from an object-oriented perspective
When the same function and HTML code are used mul...
How to understand Vue's simple state management store mode
Table of contents Overview 1. Define store.js 2. ...
Detailed explanation of Navicat's slow remote connection to MySQL
The final solution is in the last picture If you ...