mozilla
您的搜索结果

    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: http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/

     

    文档标签和贡献者

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