CSS小技巧

css精灵图

英文名：css sprites
也可以叫做雪碧图、精灵图、css贴图定位、css图像拼合

原理和好处

• 把很多个小的图片拼合到一张大图上，通过background-image、background-repeat、background-position等属性将需要的小图片呈现出来即可
• 合理使用css精灵可以减少网页http请求次数，提高页面的加载速度。
• 但是对于一些比较大的图片来说，我们为了防止图片加载太慢，我们会把图片切成多块分开加载。

css滑动门技术

为了使各种特殊的背景能够自动适应文字的多少，我们就需要使用滑动门技术

实现原理：
使用css精灵技术、使用padding撑开盒子来实现滑动门

• a标签嵌套span，因为导航大多数都是可以点击的
• a标签控制左门（左边的背景）
• span控制右门（显示右半边的背景）

代码

<a href="#"><span>首页</span></a>

a {
    display: inline-block;
    height: 33px;
    background: url("./image.png") no-repeat left;
    padding-left: 15px;
    line-height: 33px;
    text-decoration: none;
    color: #fff;
}

span {
    display: inline-block;
    height: 33px;
    background: url("./imang.png") no-repeat right;
    padding-right: 15px;
}

image.png