Home >Web Front-end >HTML Tutorial >CSS Sprite positioning implementation_html/css_WEB-ITnose
CSS Sprite positioning implementation_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:421301browse
What is CSS Sprite
Usually we call it CSS image stitching technology. Of course, some people call CSS Sprites "CSS texture positioning".
Principle
CSS Sprites principle: In fact, it is to integrate some background images in the web page into an image file, and then use CSS "background-image", "background-repeat", " The combination of "background-position" performs background positioning. background-position can accurately position the position of the background image using numbers.
Advantages
Using CSS Sprites can very well reduce the http requests of web pages, thereby greatly improving the performance of the page. This is also the biggest advantage of CSS Sprites, and also its The main reason why it is widely spread and used;
CSS Sprites can reduce the bytes of images. I have compared the bytes of merging 3 images into 1 image many times and the bytes are always smaller than this. The total bytes of 3 images.
It solves the problem of web designers in naming pictures. They only need to name a collection of pictures. There is no need to name each small element, thereby improving Improve the efficiency of web page production.
It is easy to change the style. You only need to modify the color or style of one or a few pictures, and the style of the entire web page can be changed. Maintenance is more convenient.
How to create merged images
Preliminary knowledge
Material?png format
Get the position of the image
- Open PS, click the information bar on the right
- Use the auxiliary line tool to determine the position
- View icons and icons The interval between them (when making this picture manually, it is best to arrange it evenly for easy calculation, this picture is 20px apart), look at the picture
Tips:
Code implementation (CSS contains comments)
HTML: index.html
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>CSS_Sprite</title> <link rel="stylesheet" href="css/style.css"></head><body> <h1>只取一部分做演示</h1> <div class="content"> <ul> <li><a href="#"><i class="icon_fdj"></i></a></li> <li><a href="#"><i class="icon_xj"></i></a></li> <li><a href="#"><i class="icon_dy"></i></a></li> <li><a href="#"><i class="icon_xx"></i></a></li> </ul> <ul> <li><a href="#"><i class="icon_xxk"></i></a></li> <li><a href="#"><i class="icon_bjb"></i></a></li> <li><a href="#"><i class="icon_dw"></i></a></li> <li><a href="#"><i class="icon_bq"></i></a></li> </ul> <ul> <li><a href="#"><i class="icon_info"></i></a></li> <li><a href="#"><i class="icon_infoa"></i></a></li> <li><a href="#"><i class="icon_qes"></i></a></li> <li><a href="#"><i class="icon_cz"></i></a></li> </ul> <ul> <li><a href="#"><i class="icon_hb"></i></a></li> <li><a href="#"><i class="icon_dp"></i></a></li> <li><a href="#"><i class="icon_fj"></i></a></li> <li><a href="#"><i class="icon_ck"></i></a></li> </ul> </div></body></html>
CSS: style.css
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }/*CSS reset*/h1{ text-align:center; font-size:30px; font-weight:bold; }.content{ width: 176px; height: 176px; margin: 0 auto; border:2px solid #2af1d6; padding: 10px; }/*主块大小,位置*/ul{ list-style: none; display: inline-block; }/*取消列表样式,设置内联块*/i{ display: block; margin:10px; width: 17px;height:17px;background: url(../img/cssspirit.png) no-repeat; }/*设置图标为块,定义宽高及背景*/ul li a:link{text-decoration: none;} /*取消下划线*/ul li a:hover .icon_fdj{ background-position:-21px -132px; }ul li a:hover .icon_xj{ background-position:-62px -132px; }ul li a:hover .icon_dy{ background-position:-102px -132px; }ul li a:hover .icon_xx{ background-position:-122px -132px; }ul li a:hover .icon_xxk{ background-position:-21px -152px; }ul li a:hover .icon_bjb{ background-position:-62px -152px; }ul li a:hover .icon_dw{ background-position:-102px -152px; }ul li a:hover .icon_bq{ background-position:-122px -152px; }ul li a:hover .icon_info{ background-position:-21px -172px; }ul li a:hover .icon_infoa{ background-position:-62px -172px; }ul li a:hover .icon_qes{ background-position:-102px -172px; }ul li a:hover .icon_cz{ background-position:-122px -172px; }ul li a:hover .icon_hb{ background-position:-21px -192px; }ul li a:hover .icon_dp{ background-position:-62px -192px; }ul li a:hover .icon_fj{ background-position:-102px -192px; }ul li a:hover .icon_ck{ background-position:-122px -192px; }/*浮动背景位置*/.icon_fdj{ background-position: -1px -132px; }.icon_xj{ background-position:-42px -132px; }.icon_dy{ background-position:-82px -132px; }.icon_xx{ background-position:-122px -132px; }.icon_xxk{ background-position:-1px -152px; }.icon_bjb{ background-position:-42px -152px; }.icon_dw{ background-position:-82px -152px; }.icon_bq{ background-position:-122px -152px; }.icon_info{ background-position:-1px -172px; }.icon_infoa{ background-position:-42px -172px; }.icon_qes{ background-position:-82px -172px; }.icon_cz{ background-position:-122px -172px; }.icon_hb{ background-position:-1px -192px; }.icon_dp{ background-position:-42px -192px; }.icon_fj{ background-position:-82px -192px; }.icon_ck{ background-position:-122px -192px; }/*基本的定位*/