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 explanation of Vue event handling and event modifiers
<div id="root"> <h2>Keep go...
Example of how to set div background transparent
There are two common ways to make div background ...
How to notify users of crontab execution results by email
symptom I set a crontab task on a centos7 host, b...
Implementing a web calculator based on JavaScript
This article shares the specific code of JavaScri...
Example of how to set up a Linux system to automatically run a script at startup
Preface Hello everyone, I am Liang Xu. At work, w...
HTML Web Page List Tags Learning Tutorial
HTML web page list tag learning tutorial. In HTML ...
JavaScript selector functions querySelector and querySelectorAll
Table of contents 1. querySelector queries a sing...
On good design
<br />For every ten thousand people who answ...
Detailed explanation of how to use Node.js to implement hot reload page
Preface Not long ago, I combined browser-sync+gul...
The whole process record of introducing Vant framework into WeChat applet
Preface Sometimes I feel that the native UI of We...
Detailed explanation of MySQL startup options and system variables examples
Table of contents Boot Options Command Line Long ...
MySQL sorting by conventional sorting, custom sorting, and sorting by Chinese pinyin letters
MySQL regular sorting, custom sorting, and sortin...
How to set directory whitelist and IP whitelist in nginx
1. Set a directory whitelist: Do not set restrict...
A look into tool-based websites: the definition of tool-based websites and typical case analysis (pictures and text)
When it comes to tool-type websites, we first hav...
Implementation example of JS native double-column shuttle selection box
Table of contents When to use Structural branches...