作者:手机用户2602904645 | 来源:互联网 | 2020-07-30 11:26
本章给大家介绍css怎样使用精灵图?background属性介绍(代码实例),让大家可以了解css精灵图(雪碧图)是怎样使用的。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
本章给大家介绍css 怎样使用精灵图?background属性介绍(代码实例),让大家可以了解css精灵图(雪碧图)是怎样使用的。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
一、css 如何使用精灵图?
介绍如何使用精灵图使用前,我们要先知道什么是精灵图。只有先知道什么是精灵图,了解精灵图的原理了,我们才可是说使用精灵图。
1. 什么是css精灵图(sprite)?
css精灵图(sprite)直译为“CSS精灵”,也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”,是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
2.使用css精灵图(sprite)的方法
css精灵图(sprite)其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候,现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。
3.代码实现:
使用到的精灵图(sprite)素材:incn.png
代码:
付款图标
存款图标
删除图标
粘贴图标
笑脸图标
编辑图标
效果图:
background-repeat:scroll || fixed || inherit;
scroll:默认属性,设置背景图片随页面的其余部分滚动;
fixed :设置背景图像是固定的;
inherit:指定background-attachment的设置应该从父元素继承;
以上就是css 如何使用精灵图?background属性介绍(代码实例)的详细内容,更多请关注 第一PHP社区 其它相关文章!