作者t516 (t516)
看板Web_Design
標題[問題] css每個按鈕不同圖案
時間Sat Jul 21 18:24:18 2018
我想用css控制按鈕背景圖片，
因為對這方面剛接觸，
搜尋網路上的方法後，以下方式能讓我從外部透過button id控制按鈕反應，
但是有一個缺點就是所有按鈕都變成同一個背景，
如果我希望每個按鈕不同背景必須怎麼做修改呢？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {overflow:hidden}
body {background:#FFFFFF;}
button
{background-image:url(圖片.png);
border:0; margin: 5px; font-family:'Calibri';
min-width:130px; height: 130px;}
button:hover {background: #068FBD};
</style>
</head>
<body>
<button id='foo'>Button 1</button><br>
<button id='bar'>Button 2</button>
<button id='man'>Button 3</button>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.171.73.76
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1532168661.A.C1A.html
推 torali: 用css選擇器選擇個別的id之後設定背景圖片 07/21 18:35
推 nohara001: 應該是綁按鈕Id 去個別設定css的background-image的url 07/21 23:10
推 dash11559: 你原本的寫法其實並沒有利用id去控制 07/21 23:13
推 crazwade: #foo{按鈕一圖} #bar{按鈕二圖｝以此類推？ 07/22 01:34
推 crazwade: 好像button #foo{按鈕一圖} 這樣也可以 其他以此類推 07/22 01:36
推 nohara001: 都可以 只是button id權重比較大 07/22 07:49
推 moodoa3583: button後的Id要分別改屬性 07/22 14:02
推 sa0124: 用vue 把要放的背景圖片設成一個陣列，用v-for render按鈕 07/22 22:08
→ sa0124: 綁動態css XD 07/22 22:08