背景偏移取图标的如何实现方法

互联网
每到春天，红得如火的木棉花，粉得如霞的芍药花，白得如玉的月季花竞相开放。它们有的花蕾满枝，有的含苞初绽，有的昂首怒放。一阵沁人心肺的花香引来了许许多多的小蜜蜂，嗡嗡嗡地边歌边舞。

通常为了减少客户端从服务器下载图片的次数，提高服务器的性能，现在比较流行的做法是将多张图片拼合成一张大图片，然后再利用background-position属性截取其中的各个小图标，如菜单，表单或导航的小图标等这种技术称为CSS Sprite技术，示例代码如下：
html代码如下：

XML/HTML Code复制内容到剪贴板
  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>背景偏移取图标</title>
  6. <linktype="text/css"rel="stylesheet"rel="nofollow noopener noreferrer" href="1.css"/>
  7. </head>
  8. <body>
  9. <divid="name">name</div>
  10. <divid="psw">psw</div>
  11. <divid="tel">tel</div>
  12. </body>
  13. </html>

1.css代码如下：

CSS Code复制内容到剪贴板
  1. div
  2. {
  3. width:73px;
  4. line-height:52px;
  5. height:52px;
  6. text-align:rightright;
  7. background:url(images/3.jpg)no-repeat;
  8. color:white;
  9. }
  10. #name
  11. {
  12. background-position:-286px-7px;<!--向左偏移286px,向上偏移7px-->
  13. }
  14. #psw
  15. {
  16. background-position:-272px-116px;
  17. }
  18. #tel
  19. {
  20. background-position:-535px-230px;
  21. }

（要用图片处理工具量出要截取的的图标所要偏移的量，正负代表偏移的方向，正代表向右或向下偏移，负代表向左或向上偏移）

素材图：

最终效果图：

以上这篇背景偏移取图标的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/cyn941105/archive/2016/07/13/5667923.html

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例