使用css添加圖像

-1

我有下面的代碼來顯示按鈕中的圖像使用CSS，但我無法讓它工作。該圖像位於CSS文件所在的同一目錄中。使用css添加圖像

#submit-go { 
    margin-top:1em; 
    width:69px; 
    height:26px; 
    text-indent:-9999px; 
    overflow:hidden; 
    border:0; 
    background:url(submit-button.gif) no-repeat 0 0; 
    display:block; 
    cursor:pointer !important; cursor:hand; 
} 

#submit-go:hover { 
    background-position:0 -26px; 
}

<div align="center"><button type="submit" id="submit-go" >Submit</button></div>

來源

2013-04-28 Rajesh Kumar

什麼是不工作？ 'align'也是一個不推薦的屬性 – Adrift 2013-04-28 14:29:28

我建議你儘可能地使用CSS來設計樣式，最好不要使用背景圖片。看看CSS3漸變，邊框半徑，方塊陰影，文字陰影。 – 2013-04-28 14:30:14

嘗試創建一個小提琴（http://jsfiddle.net/）和givin'我們的網址 – Pablo 2013-04-28 14:32:31

這可能是因爲background仍然覆蓋background-position。嘗試改變background這樣：

#submit-go { 
    margin-top:1em; 
    width:69px; 
    height:26px; 
    text-indent:-9999px; 
    overflow:hidden; 
    border:0; 
    background-image:url(submit-button.gif); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    display:block; 
    cursor:pointer !important; cursor:hand; 
}

來源

2013-04-28 14:29:56 Adaz

我創造了這個撥弄你的代碼http://jsfiddle.net/rDvTe/1/，並認爲它工作在Chrome中正確的測試）。

我更換圖片鏈接與URL所以它會工作，並且還增加了

#submit-go {border: 1px solid red;}

，以更好地看到按鈕。

我是對的，如果我想你想讓背景圖像顯示在懸停？否則，只需在正常和懸停狀態下切換背景位置即可。希望這是你正在尋找。

來源

2013-04-28 16:42:56 Tyblitz

使用css添加圖像

回答

相關問題