[問題] css每個按鈕不同圖案

看板Web_Design作者 (t516)時間7年前 (2018/07/21 18:24), 編輯推噓8(801)
留言9則, 6人參與, 7年前最新討論串1/1
我想用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

07/21 18:35, 7年前 , 1F
用css選擇器選擇個別的id之後設定背景圖片
07/21 18:35, 1F

07/21 23:10, 7年前 , 2F
應該是綁按鈕Id 去個別設定css的background-image的url
07/21 23:10, 2F

07/21 23:13, 7年前 , 3F
你原本的寫法其實並沒有利用id去控制
07/21 23:13, 3F

07/22 01:34, 7年前 , 4F
#foo{按鈕一圖} #bar{按鈕二圖}以此類推?
07/22 01:34, 4F

07/22 01:36, 7年前 , 5F
好像button #foo{按鈕一圖} 這樣也可以 其他以此類推
07/22 01:36, 5F

07/22 07:49, 7年前 , 6F
都可以 只是button id權重比較大
07/22 07:49, 6F

07/22 14:02, 7年前 , 7F
button後的Id要分別改屬性
07/22 14:02, 7F

07/22 22:08, 7年前 , 8F
用vue 把要放的背景圖片設成一個陣列,用v-for render按鈕
07/22 22:08, 8F

07/22 22:08, 7年前 , 9F
綁動態css XD
07/22 22:08, 9F
文章代碼(AID): #1RKmdLmQ (Web_Design)
文章代碼(AID): #1RKmdLmQ (Web_Design)