这个是老掉牙的技术了,最近看到博客有很多凌散的小图片,于是就把它们用csss prites合在一起了。下面这篇文章只是介绍一下相关的优势和用法。相关的技术文都已经是几年前的了,所以干脆就找一篇比较好理解的文章转回来算了。

 

关于CSS sprite技术的详解,小弟在这里就不赘述了,因为伟大的英特网上有一篇伟大的技术文档介绍。请移步http://css-tricks.com/css-sprites/

在CSS sprite中最重要的就是关于background这个属性的理解,所以本文比较详细的介绍了background这个属性,如有错误,劳请指教。

background的集合有:'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', 和 'background'。

在介绍background特性之前首先要明确background的作用范围,background是在padding box之内有效,所以背景色和背景图片都在此范围内。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css" rel="stylesheet">
        </style>
    </head>
    <body>
            <div id="div1" style="background-color:grey; padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
                Test background scope
            </div>
            <div id="div2" style="background-image:url(test.gif); padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
                Test background scope
            </div>
        </div>
    </body>
</html>

css sprites定位

 

background的核心属性

background-position

Value: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
 Initial:  0% 0%
 Applies to:  all elements
 Inherited:  no
 Percentages:  refer to the size of the box itself
 Media:  visual
Computed value:  for <length> the absolute value, otherwise a percentage

(1)百分数

将background-position设置为百分数,可以将其归结为跟踪原则。background-position:x% y%,是指以图片左上角为原点的A(图片长度的x%,图片高度的y%)点和以paddingbox的左上角为原点的B(paddingbox长度的x%,paddingbox高度的y%)点,相合重合。

(2)数值

将background-position设置为数值,可以将其归结为挂靠原则。background-position:

X

px 

Y

px,是指图片的左上角挂靠的以paddingbox的左上角为原点的倒直角坐标系,B(

X

px, 

Y

px)点。例如:background-position:50px 50px,是指将图片的左上角挂靠在以paddingbox的左上角为原点的倒直角坐标系,B(

50

px, 

50

px)点.background-position:-50px -50px,是指将图片的左上角挂靠在以paddingbox的左上角为原点的倒直角坐标系,B(-

50

px, -

50

px)点.

css sprites

 

综合实例:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css" rel="stylesheet">
        #div3{
        background-image:url(test.gif);
        padding:50px;
        width:100px;
        height:100px;
        border:2px solid green;
        margin:50px;
        background-position:20% 20%;
        }
        #div4{
        background-image:url(test.gif);
        padding:50px;
        width:150px;
        height:150px;
        border:2px solid green;
        margin:50px;
        background-position:50px 50px;
        background-repeat:no-repeat;
        }
        #div5{
        background-image:url(test.gif);
        padding:50px;
        width:150px;
        height:150px;
        border:2px solid green;
        margin:50px;
        background-position:-50px -50px;
        background-repeat:no-repeat;
        }
        </style>
    </head>
    <body>
            <div id="div1" style="background-color:grey; padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
                Test background scope
            </div>
            <div id="div2" style="background-image:url(test.gif); padding:50px; width:150px; height:150px; border:2px solid green; margin:50px;">
                Test background scope
            </div>
            <div id="div3">
                Test background scope
            </div>
            <div id="div4">
                Test background scope
            </div>
            <div id="div5">
                Test background scope
            </div>
        </div>
    </body>
</html>

 

本文转自:《Shawn》 http://www.cnblogs.com/sc-xx/archive/2012/03/29/2423663.html

 

Last modification:June 25, 2021
如果解决了你的困扰, 赏杯咖啡吧!
正文字体: 苍耳字库(屏幕显示字体)·苍耳今楷