CSS background-position 属性 定位图片
发布时间:2009-11-20 18:28:22 作者:佚名 我要评论
看别人代码发现一个背景图中有很多图片,大家可以参考下原理
今天无意中,看别人代码发现一个背景图中有很多图片
当时想这么多怎么就显示一个按钮的背景呢?百思不得其解,后来发现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="https://www.jb51.net/" title="首页文章"><span>首页文章</span></a></li>
<li class="page_item page-item-480"><a href="https://www.jb51.net/about.htm" title=关于本站"><span>关于本站</span></a></li>
<li class="page_item page-item-481"><a href="https://www.jb51.net/links.htm" title="友情链接"><span>友情链接</span></a></li>
<li class="page_item page-item-482"><a href="https://www.jb51.net/sitemap.htm" title="网站地图"><span>网站地图</span></a></li>
<li class="page_item page-item-491"><a href="https://www.jb51.net/softs/index.html" target="_blank" title="软件下载"><span>软件下载</span></a></li>
</ul></div>
相关文章
- 这篇文章主要介绍了CSS position属性和实例应用演示,absolute(绝对定位),relative(相对定位),relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下2017-08-11
- 这篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-06-22
css关于position属性的用法详解(绝对定位和相对定位的混淆)
下面小编就为大家带来一篇css关于position属性的用法详解(绝对定位和相对定位的混淆)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-09-08- 这篇文章主要总结了CSS的position定位属性在使用的一些重点,包括对绝对定位和相对定位等的强调,需要的朋友可以参考下2016-05-31
- 这篇文章主要介绍了图解CSS中position属性的定位用法,重点讲解了相对定位和绝对定位在页面布局中的作用,需要的朋友可以参考下2016-04-28
CSS:Table-cell属性的妙用让div也能享受table定位的好处
你要是用div的话,一会inline一会float很是蛮烦。怎么样才能在使用div的时候也能享受的table定位的好处呢?下面有个好的方法2014-09-04- DIV没有悬浮一说,更准确的应为层叠或者固定,下面为大家介绍的是通过CSS定位属性来实现这一效果2014-05-18
- CSS常用样式包括定位、显示、宽高和剪裁等属性,这些都是我们大家经常使用到的,在本文做个总结,以备不时之需2014-04-18
- 当一个div想要定位时,我们第一反应是position属性,而position属性除了默认值外,还有absolute,relative和fixed,下面有个不错的示例,不懂的朋友可以参考下2013-11-11
- 本文为大家介绍CSS布局定位属性,熟练的使用可以轻松实现优美站点布局,感兴趣的朋友可以参考下,希望对大家有所帮助2013-09-16
最新评论