时间:2021-05-08
今天无意中,看别人代码发现一个背景图中有很多图片
当时想这么多怎么就显示一个按钮的背景呢?百思不得其解,后来发现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;
hide-focus: expression(this.hideFocus=true);
}
.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;
hide-focus: expression(this.hideFocus=true);
}
.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>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
background属性是background-color,background-image,background-position,background-at
background-position的说明:设置或检索对象的背景图像位置。必须先指定background-image属性。该属性定位不受对象的补丁属性(pad
一,background-position:(图片定位)三种写法:1):按%比,左上角最小(0%,0%),右下角最大(100%,%100);2):(x,y)左上
语法:background-position:length||lengthbackground-position:position||position取值:le
实现方法:首先将小图片整合到一张大的图片上然后根据具体图标在大图上的位置,给背景定位。复制代码代码如下:.icons{background-position:-