Shulou(Shulou.com)06/03 Report--

How to introduce CSSSprites sprite technology, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Sprite is used on many websites that use a lot of small icons. Instead of referencing each small icon to the page in the form of a .png format file, using sprite only needs to reference one image, which is more memory-and bandwidth-friendly.

Realize

Suppose we provide a background picture of the elements that apply the class through the .toolbtn class:

CSS Code copies content to the clipboard

.toolbtn {background:url (myfile.png); display:inline-block; height:20px; width:20px}

The background position can be added by defining the value of the X _ background-position Y axis directly in url () of background, or through the background attribute. For example:

CSS Code copies content to the clipboard

# btn1 {background-position:-20px 0px} # btn2 {background-position:-40px 0px}

Move the element background of id=btn1 to the left 20pxMagnedBttn2 move the element background to the left 40px (assuming that the toolbtn class is added to both elements and apply the image effect defined by the above style)

Similarly, you can add the status of hover in the following ways:

CSS Code copies content to the clipboard

# btn:hover {background-position: [pixels shifted rightright] px [pixels shifted down] px;}

The basic principle of CSS Sprite is to integrate some of the images used on your site into a single image, thereby reducing the number of HTTP requests on your site. The picture is rendered using the CSS background and background-position attributes (it's worth mentioning that your tags have become more complex, and the picture is defined in CSS, not

Label).

Use the css-sprite sprite tool

It's probably the best sprite tool, well, at least it's the best I've ever used.

First of all, install css-sprite, the installation here is very crappy, wait until I finally talk about it.

The code is as follows:

Npm install css-sprite

I'm using gulp to build the front-end code, so I also need to install gulp and gulp-if, and then I can start the configuration.

Create a new task:

Copy all into notes var gulp = require ('gulp')

JavaScript Code copies content to the clipboard

Var gulpif = require ('gulp-if') Gulp.task ('sprites',function () {gulp.src (' img/icon/*.png') / / this is the path of the picture to be merged. pipe (sprite ({name: 'icon', / / define a name style:' _ icon.scss' / / this is the direction of merging of the generated style file format: 'png', / / png format image orientation:' left-right', / / Sprite Can also be set to vertical or horizontal cssPath:'# {$icon-sprite-path}', / / sprite path variable template:'. / sprite-tpl.mustache' / / scss generated template processor: 'scss' / / generated style file format}) .pipe (gulpif (' * .png', gulp.dest ('img/'), gulp.dest (' css/') })

The template for scss uses mustache:

CSS Code copies content to the clipboard

{{items}} ${{name}}: {{px.offset_x}} {{px.width}} {{px.height}; {{/ items}} @ mixin sprite-width ($sprite) {width: nth ($sprite, 3);} @ mixin sprite-height ($sprite) {height: nth ($sprite, 4) } @ mixin sprite-position ($sprite) {$sprite-offset-x: nth ($sprite, 1); $sprite-offset-y: nth ($sprite, 2); background-position: $sprite-offset-x $sprite-offset-y;} @ mixin sprite ($sprite) {@ include sprite-position ($sprite); @ include sprite-width ($sprite); @ include sprite-height ($sprite) } {{# sprite}} {{class}} {background-repeat: no-repeat; overflow: hidden; border: none; background: url ('{{escaped_image}}? vault # {$version}'); @ include inline-block (); vertical-align: middle; font-style: normal; color:$icon-font-color } {{/ sprite}} {{# items}}. {{name}} {@ include sprite (${{name}});} {{/ items}} got it! It's that simple. Now you just need to drop the image into the icon folder, run gulp sprites, and you can generate a sprite image icon.png and the corresponding scss style file _ icon.scss. You can also create a new listening task to listen to the icon folder, so that it can be generated in real time. I posted _ icon.scss: CSS Code copy content to the clipboard $icon-qq:-262px-161px 60px 60px; $icon-email:-332px-161px 60px 60px; $icon-skype:-5px-252px 60px 60px; $icon-phone:-75px-252px 60px 60px; @ mixin sprite-width ($sprite) {width: nth ($sprite, 3);} @ mixin sprite-height ($sprite) {height: nth ($sprite, 4) } @ mixin sprite-position ($sprite) {$sprite-offset-x: nth ($sprite, 1); $sprite-offset-y: nth ($sprite, 2); background-position: $sprite-offset-x $sprite-offset-y;} @ mixin sprite ($sprite) {@ include sprite-position ($sprite); @ include sprite-width ($sprite); @ include sprite-height ($sprite);} .icon {background-repeat: no-repeat Overflow: hidden; border: none; background: url ('# {$icon-sprite-path} / icon.png?v=# {$version}'); @ include inline-block (); vertical-align: middle; font-style: normal; color:$icon-font-color;}. Icon-qq {@ include sprite ($icon-qq);}. Icon-email {@ include sprite ($icon-email) }. Icon-skype {@ include sprite ($icon-skype);} .icon-phone {@ include sprite ($icon-phone);}

You only need to add something like class= "icon icon-qq" when you use it.

This is the answer to the technical question on how to get started with CSSSprites sprite. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.