使用Sass编写CSS Blend Modes

发布于 大漠

CSS Blend Modes是CSS的一个新功能,可以将一个层和元素的背景层混合在一些。常见的是将背景图像和背景颜色混合在一起。

在这篇文章中,我们将来体验一上在几个项目中使用Sass编写的一个简单的混合模式的mixin。从而学习如何使用Sass创建混合模式的mixin,并且怎么使用。

##使用混合模式

当在一个元素上使用background-blend-mode属性时,它将背景图像和背景颜色根据设置的混合模式混合在一起。

简单的混合模式的mixin设置三个参数:背景图像路径,背景颜色和混合模式:

@mixin blendy($img, $color, $blend) {
  background-image: url('img/#{$img}');
  background-color: $color;
  background-blend-mode: $blend;
}

现在我们可以在需要设置混合模式的地方像这样调用设置好的blendy的mixin:

.blend {
  @include blendy("mountains.jpg", firebrick, multiply);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-size: cover;
}

编译出来的CSS:

.blend {
  background-image: url("img/mountains.jpg");
  background-color: firebrick;
  background-blend-mode: multiply;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-size: cover;
}

##使用渐变呢?

CSS混合模式是非常强大的,他还可以让图像和渐变混合。我们一起来创建一个有趣的混合效果。

首先,我们将为我们的混合模式声明一个渐变的变量:

// Blend mode gradient
$bm-gradient: linear-gradient(aqua, royalblue);

接下来,需要调整一下mixin。因为渐变实际上是background-image而不是background-color,因此在mixin中添加一个@if/@else条件来显示多个背景层。可以像设置$color给渐变设置一个参数$bm-gradient:

@mixin blendy($img, $color, $blend) {
  $img-path: url('#{$img}');
  @if $color == $bm-gradient {
    background: $color, $img-path;
  } @else {
    background-image: $img-path;
    background-color: $color;
  }
  background-blend-mode: $blend;
}

这次使用渐变的变量来替代颜色值:

.blend {
  @include blendy("mountains.jpg", $bm-gradient, multiply);
  ...
}

##最后的工作

目前,我们仅限于渐变的混合模式,但我们希望这个mixin更强大,能接受各种变量的值。例如:

// Blend mode gradients
$fancy-grad  : linear-gradient(aqua, royalblue);
$transp-grad : linear-gradient(black, transparent);
$snarky-grad : linear-gradient(firebrick 40%, blue);

要做到这一点,我们除了设置$color参数,还会添加一个新参数$grad,而且还会设置null为默认的可选参数。由于会广泛的使用混合模式(至少对我来说)。所以将混合模式的默认值设置为multiply

@mixin blendy($img, $color: null, $grad: null, $blend: multiply) {
  $img-path: url('img/#{$img}');
  @if $grad {
    background: $grad, $img-path;
  } @else {
    background-image: $img-path;
    background-color: $color;
  }
  background-blend-mode: $blend;
}

现在我们可以简单的指定图像,和想要混合颜色或者渐变:

.blend {
  @include blendy("mountains.jpg", #00bfff);
}
.feat {
  @include blendy("featured.jpg", $grad: $fancy-grad);
}

编译出来的CSS:

.blend {
  background-image: url("img/mountains.jpg");
  background-color: #00bfff;
  background-blend-mode: multiply;
}
 
.feat {
  background: linear-gradient(aqua, royalblue), url("img/featured.jpg");
  background-blend-mode: multiply;
}

看看最后的效果:

译者:如果你从未了解或者接触CSS混合模式,建议先点击这里了解。

本文根据@Guil Hernandez的《CSS Blend Modes with Sass》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://sassbreak.com/css-blend-modes-with-sass/