作者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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1532168661.A.C1A.html
1F：推 torali: 用css选择器选择个别的id之後设定背景图片 07/21 18:35
2F：推 nohara001: 应该是绑按钮Id 去个别设定css的background-image的url 07/21 23:10
3F：推 dash11559: 你原本的写法其实并没有利用id去控制 07/21 23:13
4F：推 crazwade: #foo{按钮一图} #bar{按钮二图｝以此类推？ 07/22 01:34
5F：推 crazwade: 好像button #foo{按钮一图} 这样也可以 其他以此类推 07/22 01:36
6F：推 nohara001: 都可以 只是button id权重比较大 07/22 07:49
7F：推 moodoa3583: button後的Id要分别改属性 07/22 14:02
8F：推 sa0124: 用vue 把要放的背景图片设成一个阵列，用v-for render按钮 07/22 22:08
9F：→ sa0124: 绑动态css XD 07/22 22:08