@import "mixin";
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?yjahb8');
src: url('fonts/icomoon.eot?yjahb8#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?yjahb8') format('truetype'),
url('fonts/icomoon.woff?yjahb8') format('woff'),
url('fonts/icomoon.svg?yjahb8#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-message-typing:before {
content: "\e900";
}
.icon-align-top:before {
content: "\e901";
}
.icon-wechat:before {
content: "\e902";
}
.icon-mobile2:before {
content: "\e959";
}
$toolbar-size:52px;
.toolbar{
position:fixed;
left:50%;
bottom:5px;
margin-left:-$toolbar-size / 2;
}
.toolbar-item{
position:relative;
display:block;
width:$toolbar-size;
height:$toolbar-size;
margin-top:1px;
&:hover{
.toolbar-icon{
top:-$toolbar-size;
}
.toolbar-text{
top:0;
}
.toolbar-layer{
@include opacity(1);
@include scale(1);
}
}
}
.toolbar-btn{
position:absolute;
left:0;
top:0;
width:$toolbar-size;
height:$toolbar-size;
overflow:hidden;
}
.toolbar-icon{
position:absolute;
left:0;
top:0;
width:$toolbar-size;
height:$toolbar-size;
background-color:#d0d6d9;
font-size:30px;
color:#fff;
text-align:center;
line-height:$toolbar-size;
@include transition(top 1s);
}
.toolbar-text{
position:absolute;
left:0;
top:$toolbar-size;
width:$toolbar-size;
height:$toolbar-size;
background-color:#98a1a6;
font-size:12px;
color:#fff;
text-align:center;
line-height:1.2;
padding-top:12px;
@include transition(top 1s);
}
.toolbar-layer{
position:absolute;
right:$toolbar-size - 6;
bottom:-10px;
width:172px;
@include opacity(0);
@include transform-origin(95% 95%);
@include scale(0.01);
@include transition(all 1s);
background-image:url(../img/toolbar_img.png);
background-repeat:no-repeat;
}
.toolbar-layer-weixin{
height:212px;
background-position:0 0;
}
.toolbar-layer-app{
height:194px;
background-position:0 -222px;
}
一般情况下,背景图片不显示有两点原因:一 引入路径不正确;二 背景图片定位有误。希望能帮助到你。