dreamweaver 模板用 CSS 無法顯現圖片

Question

我想在template模板(.dwt)上多增加1個可變色的按鈕，(兩個png檔，用css寫)

但是網頁做出來只有連結(滑鼠移過去會顯示手指)，沒有圖片

請問這是要怎麼解決呢?

template的部分:

這是css

body

{

margin:0px;

padding:0px;

font-family:Verdana,arial,Geneva,sans-serif,新細明體,PMingLiU,微軟正黑體,Microsoft JhengHei;

font-size:75%;

color:#666;

background:url(../pic/tilt-bg.gif) repeat;

}

ul, li

{

padding: 0;

margin: 0;

list-style: none;

}

#area2

{

height:25px;

width:100%;

margin:0px;

padding:0px;

background-color:#aaa;

background:url(../pic/gbg.jpg) repeat;

z-index:90;

}

#area2-1

{

position:relative;

height:25px;

width:980px;

margin:0 auto;

padding:0px;

z-index:90;

}

/*menu background */

.btn_menu

{

width:150px;

height:25px;

margin:0px;

padding:0px;

float:left;

}

.btn_menu_IR

{

background:url(../pic/btn_ir.png) no-repeat;

}

.ch_menu_IR

{

background:url(../pic/btn_ir_b.png) no-repeat;

}

這是js

$(function(){$('.btn_menu_IR').hover(function(){$(this).toggleClass('ch_menu_IR');});});

$(function(){$('.btn_menu_IR').hover(function(){$('#main_menu').removeClass('test1');});});

$(function(){$('.btn_menu_IR').hover(function(){$('.btn_menu_product').removeClass('ch_menu_product');});});

這是網頁程式

</div>

water · Accepted Answer

一般會出現這種情況請先檢查一下以下兩個問題
1.圖片路徑是否正確
2.連結的寬高是否跟圖片一致

第一點來說
要先確定您圖片路徑是放在「../pic」的路徑下
這代表圖片所在位置應該是在當前目錄的上一層中的pic資料夾內
如果這點確定沒問題再進行第二點的檢查

第二點來說
加設您的圖片是150*50的圖片
那麼您的連結a應該也要設為150*50的大小
才能夠正常顯示出完整圖片唷
或是您在連結a中的內容會超過這個寬高也是可以的

2014-10-09 21:25:33 補充：
你有載入JQuery的檔案嗎?
妳的JS看起來是JQuery的寫法
不像是一般JS
因為你是用JQuery的方式在控制滑鼠滑過連結的狀態
若是沒有載入JQ檔案可能會造成無法正常使用的情況
如果有載入也請確認路徑跟檔案名稱是否相符
另外 
因為你的 .btn_menu_IR看起來裡面沒有再放其他東西
那麼你應該要給他寬高這樣才會看得到東西
而且妳是將背景圖片設定給btn_menu_IR沒有設的話
我記得預設應該會是寬100%高是0px
也有可能是這樣所以才看不到

2014-10-13 11:05:58 補充：
恩這個我就有點難判斷了
一般來說
會出現種情況都是圖片路徑有問題
或是因為有用到JQuery控制一些檔案沒載入好才會這樣
你試試看在「單做一個網頁aspx」將Body標籤中的所有資料清空
然後用CSS將圖片設為Body的背景圖片看看抓的到嗎?
抓的到的話就是JQuery檔案或.NET抓圖片的設定有問題
不然就是你的頁面巢狀標籤太多讓z軸排序有問題
造成圖片其實有載入可是被他東西檔到
因為沒有完整的Code我也沒辦法除錯@@
根據經驗來看以上是比較常見的原因 再來就要有完成file才能測試了
或者你檢查一下圖片檔案名稱跟副檔名是否跟CSS載入的相同唄

dreamweaver 模板用 CSS 無法顯現圖片

1 個解答