大佬教程收集整理的这篇文章主要介绍了将线性渐变传递给 Sass mixin，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我想将整个线性梯度传递给我的 mixin。 我尝试了任何我能想到的方法，但结果总是显示“无”，将我的图像覆盖为白色。
@mixin webp-BACkgroundGradIEnt($imgpath,$type: '.jpg') {
BACkground-image: linear-gradIEnt(to bottom,rgba(255,255,0.8) 10%,white 80%),url('#{$imgpath}#{$typE}');
}
似乎工作得很好，请参阅 codepen...
https://codepen.io/joshmoto/pen/GRNegrP
我猜可能是你的图片路径有问题？如果不查看您的控制台源，就很难判断。
我从你的 mixin 参数中删除了 $type: '.jpg' 并直接传递了图片网址。
@mixin webp-BACkgroundGradient($img) {
BACkground-size: cover;
BACkground-repeat: no-repeat;
BACkground-image: linear-gradient(
to bottom,rgba(white,0.5) 10%,1) 90%
),url("#{$img}");
}
.image {
height: 100vh;
@include webp-BACkgroundGradient("https://i.imgur.com/Unv29z8.jpeg");
}
这是输出...
.image {
height: 100vh;
BACkground-size: cover;
BACkground-repeat: no-repeat;
BACkground-image: linear-gradient(to bottom,rgba(255,255,white 90%),url("https://i.imgur.com/Unv29z8.jpeg");
}<link href="https://cdnjs.cloudFlare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div class="image"></div>
@mixin 传递背景图片 url 和可选的背景渐变叠加...
在此处查看 codepen 示例 https://codepen.io/joshmoto/pen/JjbzOoj
@mixin bg_img_gradient($img,$gradient:falsE) {
BACkground-size: cover;
BACkground-repeat: no-repeat;
@if $gradient != false {
BACkground-image: #{$gradient},url("#{$img}");
} @else {
BACkground-image: url("#{$img}");
}
}
.image-1 {
height: 100vh;
width:50%;
float: left;
@include bg_img_gradient(
"https://i.imgur.com/Unv29z8.jpeg"
);
}
.image-2 {
height: 100vh;
width:50%;
float: left;
@include bg_img_gradient(
"https://i.imgur.com/Unv29z8.jpeg",linear-gradient(
to bottom,1) 90%
)
);
}
这里是 css 输出...
.image-1 {
height: 100vh;
width: 50%;
float: left;
BACkground-size: cover;
BACkground-repeat: no-repeat;
BACkground-image:url("https://i.imgur.com/Unv29z8.jpeg");
}
.image-2 {
height: 100vh;
width: 50%;
float: left;
BACkground-size: cover;
BACkground-repeat: no-repeat;
BACkground-image: linear-gradient(to bottom,url("https://i.imgur.com/Unv29z8.jpeg");
}<link href="https://cdnjs.cloudFlare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div class="image-1"></div>
<div class="image-2"></div>以上是大佬教程为你收集整理的将线性渐变传递给 Sass mixin全部内容，希望文章能够帮你解决将线性渐变传递给 Sass mixin所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。