由布局学习CSS——从CSS sprites重视background

关于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>

background的核心属性background-position

'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:Xpx Ypx,是指图片的左上角挂靠的以paddingbox的左上角为原点的倒直角坐标系,B(Xpx, Ypx)点。例如:background-position:50px 50px,是指将图片的左上角挂靠在以paddingbox的左上角为原点的倒直角坐标系,B(50px, 50px)点.background-position:-50px -50px,是指将图片的左上角挂靠在以paddingbox的左上角为原点的倒直角坐标系,B(-50px, -50px)点.

综合实例:

<!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>





 

posted @ 2012-03-29 16:55  shawnXiao  Views(2524)  Comments(1Edit  收藏  举报