Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

CSS 雪碧图

引言

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 

实现

假设我们通过.toolbtn的类,为应用该类的各元素提供一张背景图片:

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

背景位置,可以通过在background的url()直接定义X,Y轴的值,或者通过background-position属性来添加。例如:

<style>
#btn1 {background-position: -20px 0px}
#btn2 {background-position: -40px 0px}
</style>

id=btn1的元素背景左移20px,id=btn2的元素背景左移40px(假设这两个元素的都添加了toolbtn类,应用了上面样式定义的图片效果)

类似的,你也可以使用下面的方式添加hover的状态:

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

深入阅读

完整的 demo: https://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

 

文档标签和贡献者

 此页面的贡献者: ReyCG_sub, bingguo, Wenbin
 最后编辑者: ReyCG_sub,