问答详情
源自：4-1 编程挑战

为什么第二个雪碧图效果出不来呢？

<!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>

不知道是哪里错了？

提问者：Charliezhang 2015-12-06 17:56

个回答

  • qq_安伊偌拉_0
    2015-12-07 09:25:22
    已采纳

    .cont-3{

        background:url(http://img.mukewang.com/539a972b00013e9102280177.jpg) 0 -38;

    }

    这里的-38要加上px

    1
  • 李晓健
    2015-12-06 19:10:50

    .cont-3 {
    background: url(http://img.mukewang.com/539a972b00013e9102280177.jpg) no-repeat;
    background-position: 0 -38px;
}

    这样试一下

    0