December 26, 2014
兩張圖檔方式 w224 x h152 px
範例連結:
http://goo.gl/iw2C8F
註:開啟後,檢視原始碼。
一張圖檔方式 w224 x h304 px
範例連結:
http://goo.gl/SALgde
註:開啟後,檢視原始碼。
範例連結:
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>
#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>
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>
0 Comment(s)