CSS Sprite positioning implementation_html/css_WEB-ITnose-HTML Tutorial-php.cn

CSS Sprite positioning implementation_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:42

Original

1292 people have browsed it

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

CSS Sprites generation tool

Generate with PS

CSS Sprite positioning implementation (PS determines X, Y)

Preliminary knowledge

DIV CSS basics (especially the two parameters background and background-position)

PS basics

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:

Background-position is based on the upper left corner of the image, which is 0 0

The parameters can be mixed with pixels and percentages (eg: 5px 20%), there is only one parameter When, another parameter defaults to 50%

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>

Copy after login

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; }/*基本的定位*/

Copy after login