将图片组合CSS贴图定位技术(雪碧图)

作者: 鲁智深 分类: div+css 发布时间: 2013-11-15 22:49

CSS Sprites 简介:通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。

经常做网站seo的朋友肯定注意到了图片的请求次数会影响到网站打开速度。如下图:

贴图

贴图

上图中的集合了多个元素图片,所谓的CSS贴图定位技术就是把上图中的小图片一个个调用出来。

博主我比较习惯使用像素(px)来定位图片。

以图片的左上角定位原点。

定位原点

定位原点

原点到搜索框的距离是x=11,y=15。

在以这个点定位图片的高度和宽度为width: 280px; height: 32px;

调用css代码如下:

1
2
3
4
5
6
    background: url("images/bg.png") no-repeat scroll 0 -108px rgba(0, 0, 0, 0);
    color: #666666;
   height: 32px;
    overflow: hidden;
    position: relative;
    width: 280px;

注意:

no-repeat(不平铺)防止出现错位。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

一条评论
  • 猫猫

    2013 年 11 月 16 日 12:15

    no-repeat(不平铺)防止出现错位。

发表评论

电子邮件地址不会被公开。 必填项已用*标注