繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS background-position 属性 定位图片
- CSS样式表
- 理解(X)HTML的文档结构
- CSS教程：理解继承属性及应用
- CSS网页布局：关于定位（position）
- CSS简单实现网页悬浮效果（对联广告）
- CSS教程：行高line-height属性(1)
- CSS Sprite图片处理技巧
- CSS教程:最基本的条状图表
- CSS教程:复合型条状图表
- 网页布局 CSS简单实现垂直居中
- CSS网页实例：斜角滑动门导航条
- CSS教程:专门介绍滑动门
- 网页文字应用CSS的一些技巧
- IE7与web标准设计（1）
- IE7与web标准设计（2）
- 网页的中英文字体对齐问题的解决
- IE7与web标准设计（3）
- CSS教程:网页英文字体和中文字体应用
- css教程:css和document
- CSS规则的结构和Grouping、class和id
- CSS解决浏览器的等宽空格问题
CSS样式表 中的 CSS background-position 属性 定位图片
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 248 ::
收藏到网摘: n/a
今天无意中，看别人代码发现一个背景图中有很多图片 
当时想这么多怎么就显示一个按钮的背景呢？百思不得其解，后来发现CSS 这样定义：
复制代码
代码如下:.nav {
background:transparent url(images/y.gif) no-repeat scroll 0 0;
height:42px;
width:980px;
font-size:12px; list-style:none;
}
.nav ul{
padding-left:4px;
}
.nav li{position:relative;float:left;}
.nav .page_item a{
height:42px;
line-height:35px;
display:inline-block;
padding-right:13px;
color:#000000;
outline:none; /* for firefox 1.5 + */
hide-focus: expression(this.hideFocus=true); /* for ie 5+ */
}
.nav .page_item a span{
display:inline-block;
height:42px;
cursor:pointer;
padding:0px 0px 0px 12px;
}
.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%。
以上CSS 效果图 ：
把位置变换一下 在看效果 ：
复制代码
代码如下:.nav {
background:transparent url(images/y.gif) no-repeat scroll 0 0;
height:42px;
width:980px;
font-size:12px; list-style:none;
}
.nav ul{
padding-left:4px;
}
.nav li{position:relative;float:left;}
.nav .page_item a{
height:42px;
line-height:35px;
display:inline-block;
padding-right:13px;
color:#000000;
outline:none; /* for firefox 1.5 + */
hide-focus: expression(this.hideFocus=true); /* for ie 5+ */
}
.nav .page_item a span{
display:inline-block;
height:42px;
cursor:pointer;
padding:0px 0px 0px 12px;
}
.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;
}
页面代码：
复制代码
代码如下:<link rel="stylesheet" href="3.css" type="text/css" media="screen" />
<div class="nav"><ul>
<li class="page_item page-item-649"><a href="http://www.ruanchen.com/" title="首页文章"><span>首页文章</span></a></li>
<li class="page_item page-item-480"><a href="http://www.ruanchen.com/" title=关于本站"><span>关于本站</span></a></li>
<li class="page_item page-item-481"><a href="http://www.ruanchen.com/" title="友情链接"><span>友情链接</span></a></li>
<li class="page_item page-item-482"><a href="http://www.ruanchen.com/" title="网站地图"><span>网站地图</span></a></li>
<li class="page_item page-item-491"><a href="http://www.ruanchen.com/" target="_blank" title="软件下载"><span>软件下载</span></a></li>
</ul></div>
评论 (0) All
