为了账号安全,请及时绑定邮箱和手机立即绑定

怎么确定图片的起始位置一定在中间呢

没有看有定位置的样式,我在微信前面加一个块级元素也是紧贴的微信的,到底是怎么回事http://img1.sycdn.imooc.com//569c8a5200010a4916360976.jpg

$toolbar-size: 52px;
.toolbar {
  position: absolute;
  left: 50%;
  bottom: 5px;
  margin-left: -$toolbar-size / 2;
}


.toolbar-item {
  position: relative;
  display: block;//把a标签显示成块级元素
  width: $toolbar-size;//块级元素的长
  height: $toolbar-size;//块级元素的高
  background-image: url(../img/toolbar.png);
  background-repeat: no-repeat;//图片不重复
  margin-top: 1px;
}
.toolbar-item-pic{
  width: 170px;
  height: 350px;
  background-position: 0 0px;
}

.toolbar-item-weixin {
  background-position: 0 -798px;//把块级元素a标签所在图片的位置移动
  &:hover {
     background-position: 0 -860px;
   }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toolbar</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="toolbar">
    <a href="javascript:;" class="toolbar-item toolbar-item-pic">

    </a>
    <a href="javascript:;" class="toolbar-item toolbar-item-weixin">
        <span class="tool-layer"></span>
    </a>
    <a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a>
    <a href="javascript:;" class="toolbar-item toolbar-item-app">
        <span class="tool-layer"></span>
    </a>
    <a href="javascript:;" class="toolbar-item toolbar-item-top"></a>
</div>
</body>
</html>


正在回答

1 回答

50%啊,系统会自动计算50%的,就是中间。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

怎么确定图片的起始位置一定在中间呢

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号