问题描述
我想将整个线性梯度传递给我的 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>