时间戳

首页 > 解决方案 > 将线性渐变传递给 Sass mixin

css - 将线性渐变传递给 Sass mixin

问题描述

我想将整个线性渐变传递给我的 mixin。我已经尝试了任何我能想到的方法，但它总是导致它出现“无”，它用白色覆盖了我的图像。

@mixin webp-backgroundGradient($imgpath, $type: '.jpg') {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 10%, white 80%), url('#{$imgpath}#{$type}');
}

标签： csssassmixins

解决方案

似乎工作得很好，请参阅codepen ...

https://codepen.io/joshmoto/pen/GRNegrP

我猜这可能是您的图像路径的问题？没有看到你的控制台源很难说。

我$type: '.jpg'从您的 mixin 参数中删除并直接传递了图像 url。

@mixin webp-backgroundGradient($img) {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: linear-gradient(
      to bottom,
      rgba(white, 0.5) 10%,
      rgba(white, 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, 255, 0.5) 10%, 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,
      rgba(white, 0.5) 10%,
      rgba(white, 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, rgba(255, 255, 255, 0.5) 10%, 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-1"></div>
<div class="image-2"></div>

推荐阅读