为什么第二个雪碧图效果出不来呢？
来源：4-1 编程挑战
Charliezhang
2015-12-06 17:56
<!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;
}
.box{
width:190px;
height:250px;
background-color:#BBFFEE;
padding:0 20px;
font-size:14px;
}
.cont{
width:190px;
height:30px;
margin:8px auto;
text-indent:30px;
color:#AAAAAA;
border:1px solid #acc3e3;
border-radius:3px;
}
p {
margin-top:5px;
font-family:"微软雅黑";
}
p input{
margin-right:5px;
}
p a{
float:right;
text-decoration:none;
}
.cont-2,.cont-3{
width:100%;
height:38px;
margin:12px auto;
}
.cont-2{
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg) no-repeat;
}
.cont-3{
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg) 0 -38;
}
</style>
</head>
<body>
<div class="box">
<form>
<input class="cont" type="text" value="邮箱/手机号/用户名"/>
<input class="cont" type="text" value="请输入密码"/>
<p>
<input type="checkbox" />下次自动登录
<a href="#">忘记密码？</a>
</p>
<input class="cont-2"type="button"/>
<hr>
<input class="cont-3" type="button"/>
</form>
</div>
</body>
</html>不知道是哪里错了？
写回答
关注
2回答
-
- qq_安伊偌拉_0
- 2015-12-07 09:25:22
.cont-3{
background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg) 0 -38;
}
这里的-38要加上px
-
- 李晓健
- 2015-12-06 19:10:50
.cont-3 { background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg) no-repeat; background-position: 0 -38px; }这样试一下
CSS Sprite雪碧图应用
必学的大型网站实用技术，让你快速掌握CSS Sprite雪碧图技术
47101 学习 · 228 问题
相似问题