邢旭叔叔
2015-10-20 17:41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0; padding:0; } form{ width:200px; padding:5px 10px; background-color:lightblue; } .block { width:190px; height:38px; display:block; margin:10px 0; font-size:15px; text-indent:2em; } label,a{ font-size:80%; text-decoration:none; } label{ margin-right:25px; } .button{ border:none; background-image:url(http://img.mukewang.com/539a972b00013e9102280177.jpg); } #signup{ background:url(sp.png)0 -38px; display:inline; } </style> </head> <body> <form> <input class="block" placeholder="邮箱/手机号/用户名"> <input class="block" placeholder="请输入密码"> <input type="checkbox" id="remember"> <label for="remember">下次自动登录</label> <a href="#">忘记密码?</a> <!--<button class="block" id="login"></button> <button class="block" id="signup"></button>--> <div class="block"><input class="button" type="button"></div> <div class="block"><input class="button" type="button" id="signup"></div> </form> </body> </html>
你div里面的input没有设宽高
.button{
width:100%;
height:100%;
border:none;
background-image:url(http://img.mukewang.com/539a972b00013e9102280177.jpg);
}
#signup{
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg)0 -38px;
}
没有设置background-position
CSS Sprite雪碧图应用
47100 学习 · 228 问题
相似问题