css sprites的用法

最新推荐文章于 2022-12-12 22:35:59 发布

whaxrl

最新推荐文章于 2022-12-12 22:35:59 发布

阅读量583

点赞数

分类专栏： css 文章标签： sprites css

css 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

CSS Sprites工作原理

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，在需要用到图片的时候，通过CSS属性background-image组合background-repeat, background-position等来实现。

通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

CSS Sprites实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
div#tools h5    {}{
    margin: 0 0 10px 0;
    padding: 0;
    overflow:hidden;
    }

div#tools h5#tools_reference, div#tools h5#tools_quiz {}{
    text-indent: -9999px;
    width: 120px;
    height: 45px;
    }

div#tools h5#tools_reference a,  div#tools h5#tools_quiz a {}{
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    }

div#tools h5#tools_reference a    {}{
    background: transparent url(图片URL) top left no-repeat;
    }

div#tools h5#tools_reference a:hover    {}{
    background: transparent url(图片URL) 0 -45px no-repeat;
    }

div#tools h5#tools_quiz a    {}{
    background: transparent url(图片URL) top left no-repeat;
    }

div#tools h5#tools_quiz a:hover    {}{
    background: transparent url(图片URL) 0 -45px no-repeat;
    }  
</style>
</HEAD>

<BODY>

<div id="tools"> 
  <h5 id="tools_reference"><a href="">PHP 参考手册</a></h5> 
  <h5 id="tools_quiz"><a href="">PHP 测验</a></h5> 
</div>


</BODY>
</HTML>

文章转载自： css sprites介绍 http://www.studyofnet.com/news/389.html