gpt4 book ai didi

css - Sass - 混合设置 2 分层背景

转载 作者:太空宇宙 更新时间:2023-11-04 12:53:16 25 4
gpt4 key购买 nike

我一直在尝试为我在我的网站上一直重复的内容创建一个混合,但它不起作用。

我想创建的 mixin 生成一个包含两个图像的图标,两个图像都用作背景图像并被覆盖。基本上你应该得到它的结果,一个圆形背景,一个图像应用为背景图像,顶部是使用 css 背景图像放置的实际图标。

这是我做的 mixin。

@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
}

欢迎您的帮助...

最佳答案

如 cimmanon 所述,检查您的图像路径并删除最后一个参数上的双引号。

 @include coloredIcons(200px,200px,50%,"idea_grey","bg_icon_red","png","jpg",200px,cover);

生成与纯 css 版本相同的输出。

关于css - Sass - 混合设置 2 分层背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26011323/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com