goTOP
December 26, 2014

CSS img 圖像 切換 兩張圖與單張圖做法

| |
網頁語言 » CSS | 閱覽(5848) | Posted by apao at 10:33
兩張圖檔方式 w224 x h152 px

點擊在新視窗中瀏覽此圖片 點擊在新視窗中瀏覽此圖片

範例連結:
http://goo.gl/iw2C8F
註:開啟後,檢視原始碼。

<style type="text/css">
#bButton a {
display: block;
overflow: hidden;
height: 0px;
width: 224px; /*圖檔寬度*/
background-image: url(img/a.png);
padding: 152px 0 0 0; /*圖檔高度 將圖檔移至顯示框外*/
}

#bButton a:hover {
background-image: url(img/b.png);
}
</style>



一張圖檔方式 w224 x h304 px

點擊在新視窗中瀏覽此圖片

範例連結:
http://goo.gl/SALgde
註:開啟後,檢視原始碼。

<style type="text/css">
a:link.bButton{
  display:block; /*圖檔區塊方式呈現*/
  width:224px; /*背景圖檔寬224px*/
  height:152px; /*背景圖檔高152px*/
  background:url(img/a_b.png) center top; /*圖檔高度304px 將圖顯示範圍152px往上方靠*/
  text-indent:-10000px; /*文字行距 將文字偏移-10000px上方*/
  list-style:none; /*不要出現清單項目*/
}
a:hover.bButton{
  display:block;
  width:224px;
  height:152px;
  background:url(i/poster_201412s.jpg) center bottom; /*圖檔高度304px 將圖顯示範圍152px往下方靠*/
  text-indent:-10000px;
  list-style:none;
  border:#DBE1FC solid 1px;
}
</style>
Facebook twitter LINEk
文章来自: 本站原創
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我