CSS: background-position 属性 定位图片

 今天无意中，看别人代码发现一个背景图中有很多图片，

当时想这么多怎么就显示一个按钮的背景呢？百思不得其解，后来发现CSS 这样定义：

 .nav .page_item a:hover,.nav .current_page_item a{ background:url(images/x.gif) no-repeat right -90px; } .nav .page_item a:hover span, .nav .current_page_item a span{ color:#FFFFFF; background:url(images/x.gif) no-repeat left -90px; }

后来查看 background 定义，找到 background-position

定义和用法

background-position 属性设置背景图像的起始位置。

 

原来设置这个属性可以让图片显示某一位置 ,注意有两个值

第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值，另一个值将是 50%。

效果图：

把位置变换一下 在看效果 ：

.nav .page_item a:hover,.nav .current_page_item a{ background:url(images/x.gif) no-repeat -30px -240px; } .nav .page_item a:hover span, .nav .current_page_item a span{ color:#FFFFFF; background:url(images/x.gif) no-repeat left -240px; }

很不错的一个属性。大家都来试试吧！