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

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

来源：2-3 CSS样式

qq_文兵

2016-01-18 14:47

没有看有定位置的样式,我在微信前面加一个块级元素也是紧贴的微信的,到底是怎么回事

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

写回答关注