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
Node.js+express message board function implementation example
Table of contents Message Board Required librarie...
Detailed explanation of how to solve the conflict of project URLs caused by setting the default path of Tomcat
Preface Tomcat is an excellent Java container, bu...
Complete steps to install Anaconda3 in Ubuntu environment
Table of contents Introduction to Anaconda 1. Dow...
Mysql optimization tool (recommended)
Preface While browsing GitHub today, I found this...
Detailed example of mysql trigger usage
MySQL trigger syntax details: A trigger is a spec...
Native JavaScript message board
This article shares the specific code of JavaScri...
Problems with installing mysql and mysql.sock under linux
Recently, I encountered many problems when instal...
Analysis of the implementation process of Nginx high availability solution in production environment
Preparation: 192.168.16.128 192.168.16.129 Two vi...
HTML marquee tag usage examples
This tag is not part of HTML3.2 and only supports ...
How to use MySQL binlog to restore accidentally deleted databases
Table of contents 1 View the current database con...
Use of hasOwnProperty method of js attribute object
Object's hasOwnProperty() method returns a Bo...
JavaScript implements the generation of 4-digit random verification code
This article example shares the specific code for...
Summary of the use of TypeScript in React projects
Preface This article will focus on the use of Typ...
Vue implements two-way data binding
This article example shares the specific code of ...
Some pitfalls of JavaScript deep copy
Preface When I went to an interview at a company ...