快捷搜索:
来自 新京葡娱乐场网址 2019-10-23 05:18 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

不敢相信 无法相信的搅动形式,代码完毕图片放

mix-blend-mode 与 background-blend-mode

mix-blend-mode 在我之前的一篇文章初略介绍过 — 不可思议的混合模式 mix-blend-mode,与本文的主角 background-blend-mode 一样,都是实现混合模式的。

混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

简单区分一下这两个属性:

  • mix-blend-mode 用于多个不同标签间的混合模式
  • background-blend-mode 用于单个标签间内背景图与渐变背景间的混合模式。

background-blend-mode 的可用取值与 mix-blend-mode一样,不重复介绍,下面直接进入应用阶段。

 

background-blend-mode 简介

除了 mix-blend-mode ,CSS 还提供一个 background-blend-mode 。也就是背景的混合模式。

  • 可以是背景图片与背景图片的混合,
  • 也可以是背景图片和背景色的之间的混合。

background-blend-mode 的可用取值与 mix-blend-mode一样,不重复介绍,下面直接进入应用阶段。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 1 图片 2

1 赞 8 收藏 6 评论

不可思议的混合模式 background-blend-mode

2017/12/27 · CSS · background-blend-mode

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

本文接前文:不可思议的混合模式 mix-blend-mode 。由于 mix-blend-mode 这个属性的强大,很多应用场景和动效的制作不断完善和被发掘出来,遂另起一文继续介绍一些使用 mix-blend-mode 制作的酷炫动画。

CSS3 新增了一个很有意思的属性 — mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。

混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。当然,瞎用乱用混合模式谁都会,利用混合模式将多个图层混合得到一个新的效果,只是要用到恰到好处,或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。

关于作者:chokcoco

图片 3

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

图片 4

最后

更多精彩 CSS 技术文章汇总在我的 Github — iCSS ,持续更新,欢迎点个 star 订阅收藏。

好了,本文到此结束,希望对你有帮助 :)

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持我写出更多好文章,谢谢!

打赏作者

background-blend-mode 兼容性

相较于 mix-blend-modebackground-blend-mode 的兼容性会更好一点。所以本文所介绍的技术在移动端是存在用武之地的:

图片 5

使用 mix-blend-mode || background-blend-mode 改变图标的颜色

如果再运用上一篇文章介绍的知识 两行 CSS 代码实现图片任意颜色赋色技术 ,我们可以实现 ICON 的颜色的动态改变。

假设我们有这样一张 ICON 图,注意主色是黑色,底色的白色(底色不是透明色),所以符合要求的 JPG、PNG、GIF 图都可以:

图片 6

利用 background-blend-mode: lighten 可以实现动态改变图标主色的效果:

图片 7

而且这里的具体颜色(渐变、纯色皆可),动画方向都可以可以随意控制的。demo3

 

又或者是这种 hover fadeIn 效果:

图片 8demo4

 

使用 background-blend-mode: lighten 实现主色改为渐变色

这个方法更厉害的地方在于,不单单可以将纯色图片由一种颜色改为另一种颜色,而且可以将图片内的黑色部分由单色,改为渐变颜色!

简单的 CSS 代码如下:

.pic { background-image: url($img), linear-gradient(#f00, #00f); background-blend-mode: lighten; background-size: cover; }

1
2
3
4
5
.pic {
    background-image: url($img), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
    background-size: cover;
}

可以得到这样的效果:

图片 9

OK,看到这里,大家伙肯定会有疑问了,这是怎么实现的呢?

这里就有必要解释一下 lighten 这个混合模式了。变亮,变亮模式与变暗模式产生的效果相反:

  1. 用黑色合成图像时无作用,用白色时则仍为白色
  2. 黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式

CodePen Demo — 纯色图片赋色技术尝试

 

mix-blend-mode 简介

关于 mix-blend-mode 最基本的用法和描述,可以简单看看上篇文章 不可思议的混合模式 mix-blend-mode。

使用 background-blend-mode: lighten 实现任意图片颜色赋色技术

OK,下面进入正文。如何通过纯 CSS 技术实现任意图片的任意颜色赋色技术呢?

假设我们有这样一张图片,JPG、PNG、GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色

图片 10

利用 background-blend-mode ,我们可以在图片下叠加多一层其他颜色,通过 background-blend-mode: lighten 这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。

简单的 CSS 代码示意如下:

.pic { width: 200px; height: 200px; background-image: url($img); background-size: cover; } .pic1 { background-image: url($img), linear-gradient(#f00, #f00); background-blend-mode: lighten; background-size: cover; }

1
2
3
4
5
6
7
8
9
10
11
12
.pic {
    width: 200px;
    height: 200px;
    background-image: url($img);
    background-size: cover;
}
 
.pic1 {
    background-image: url($img), linear-gradient(#f00, #f00);
    background-blend-mode: lighten;
    background-size: cover;
}

效果如下:

图片 11

注意,上面 CSS 这一句是关键 background-image: url($img), linear-gradient(#f00, #f00); ,这里我叠加了一层渐变层 linear-gradient(#f00, #f00) ,实现了一个纯红色背景,而不是直接使用 #f00 实现红色背景。

 

使用 mix-blend-mode 制作文字背景图

我们将上面 ICON 这个场景延伸一下,ICON 图可以延伸为任意黑色主色白色底色图片,而颜色则可以是纯色、渐变色、或者是图片。

那么我们可以尝试让文字带上渐变色,或者说让文字透出图片。当然这个效果有一些 CSS 属性也可以完成。

譬如 background-clip: text 背景裁剪就可以让文字带上渐变色或者展示图片,可以戳这里看看 使用 background-clip 实现文字渐变。

这里我们使用 mix-blend-mode 也能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片,再运用 mix-blend-mode 即可,简单原理如下:

图片 12

核心代码如下,可以看看:

<div class="container"> <div class="pic"></div> <div class="text">IMAGE</div> </div>

1
2
3
4
<div class="container">
    <div class="pic"></div>
    <div class="text">IMAGE</div>
</div>

.pic { position: relative; width: 100%; height: 100%; background: url($img); background-repeat: no-repeat; background-size: cover; } .text { position: absolute; width:100%; height:100%; color: #000; mix-blend-mode: lighten; background-color: #fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.pic {
    position: relative;
    width: 100%;
    height: 100%;
    background: url($img);
    background-repeat: no-repeat;
    background-size: cover;
}
 
.text {
    position: absolute;
    width:100%;
    height:100%;
    color: #000;
    mix-blend-mode: lighten;
    background-color: #fff;
}

demo5

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:不敢相信 无法相信的搅动形式,代码完毕图片放

关键词: