欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS background-position 屬性 定位圖片

  發(fā)布時間：2009-11-20 18:28:22   作者：佚名   我要評論
看別人代碼發(fā)現(xiàn)一個背景圖中有很多圖片，大家可以參考下原理

今天無意中，看別人代碼發(fā)現(xiàn)一個背景圖中有很多圖片

當時想這么多怎么就顯示一個按鈕的背景呢？百思不得其解，后來發(fā)現(xiàn)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 屬性設(shè)置背景圖像的起始位置。
原來設(shè)置這個屬性可以讓圖片顯示某一位置 ,注意有兩個值
第一個值是水平位置，第二個值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您僅規(guī)定了一個值，另一個值將是 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.dbjr.com.cn/" title="首頁文章"><span>首頁文章</span></a></li>
<li class="page_item page-item-480"><a href="http://www.dbjr.com.cn/about.htm" title=關(guān)于本站"><span>關(guān)于本站</span></a></li>
<li class="page_item page-item-481"><a href="http://www.dbjr.com.cn/links.htm" title="友情鏈接"><span>友情鏈接</span></a></li>
<li class="page_item page-item-482"><a href="http://www.dbjr.com.cn/sitemap.htm" title="網(wǎng)站地圖"><span>網(wǎng)站地圖</span></a></li>
<li class="page_item page-item-491"><a href="http://www.dbjr.com.cn/softs/index.html" target="_blank" title="軟件下載"><span>軟件下載</span></a></li>
</ul></div>

相關(guān)文章

最新評論