我一直在尝试为我在网站上重复的内容创建一个mixin,但它不起作用。
我要创建的mixin生成一个带有两个图像的图标,两个图像都用作背景图像并叠加。基本上你应该有它的结果,一个圆形背景,一个图像应用为背景图像,顶部是实际的图标,使用css背景图像。
这是我做的混音。
@mixin coloredIcons($width,$height,$radius,$nameImgA,$nameImgB,$extensionA,$extensionB,$bg-size1,$bg-size2){
width: $width;
height:$height;
background:url("../imgs/#{$nameImgA}.#{$extensionA}") no-repeat center center,
url("../imgs/#{$nameImgB}.#{$extensionB}") center center;
-moz-border-radius: $radius;
-webkit-border-radius:$radius;
-o-border-radius:$radius;
border-radius: $radius;
background-size: $bg-size1 $bg-size1, $bg-size2;
};
这是我将它包含在我的红色类中的方式。
.red{
@include coloredIcons(200px,200px,50%,"idea","bg_icon_red","png","jpg",200px,"cover");
}
并且显而易见它不起作用,还没有找到解决方法。 然而,这里的纯css版本就像魅力一样。
.red{
// @include coloredIcons(200px,200px,50%,"idea","bg_icon_red","png","jpg",200px,"cover");
width: 200px;
height: 200px;
background:url('../imgs/icons/idea_grey.png') no-repeat center center,
url("../imgs/bg_icon_red.jpg") center center;
-moz-border-radius: 50%;
-webkit-border-radius:50%;
-o-border-radius:50%;
border-radius: 50%;
background-size: 200px 200px,cover
}
欢迎你的帮助......
答案 0 :(得分:1)
正如cimmanon所提到的,检查你的图像路径并删除你上一个参数的双引号。
@include coloredIcons(200px,200px,50%,"idea_grey","bg_icon_red","png","jpg",200px,cover);
生成与纯css版本相同的输出。