关于css:CSS奇思妙想-使用-background-创造各种美妙的背景

38次阅读

共计 5857 个字符，预计需要花费 15 分钟才能阅读完成。

本文属于 CSS 绘图技巧其中一篇，系列文章：

  • 在 CSS 中应用三角函数绘制曲线图形及展现动画
  • CSS 奇思妙想 — 应用 CSS 发明艺术

将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相干属性，制作一些略微简单、酷炫的背景。

通过本文，你将会理解到 CSS background 中更为弱小的一些用法，并且学会利用 background 相干的一些属性，采纳不同的形式，去发明更简单的背景图案。在这个过程中，你会更好的把握不同的突变技巧，更深层次的了解各种不同的突变。

同时，借助弱小的 CSS-Doodle，你将学会如何使用一套规定，疾速创立大量不同的随机图案，感触 CSS 的弱小，走进 CSS 的美。

背景基础知识

咱们都晓得，CSS 中的 background 是十分弱小的。

首先，温习一下根底，在日常中，咱们应用最多的应该就是上面 4 种：

  • 纯色背景 background: #000：

  • 线性突变 background: linear-gradient(#fff, #000) :

  • 径向突变 background: radial-gradient(#fff, #000) :

  • 角向突变 background: conic-gradient(#fff, #000) :

背景进阶

当然。把握了根本的突变之后，咱们开始向更简单的背景图案进发。我最早是在《CSS Secret》一书中接触学习到应用突变去实现各种背景图案的。而后就是一直的摸索尝试，总结出了一些教训。

在尝试应用突变去制作更简单的背景之前，列出一些比拟重要的技巧点：

  • 突变不仅仅只能是单个的 linear-gradient 或者单个的 radial-gradient，对于 background 而言，它是反对多重突变的叠加的，一点十分重要；
  • 灵便应用 repeating-linear-gradeint（repeating-radial-gradeint），它能缩小很多代码量
  • transparent 通明无处不在
  • 尝试 mix-blend-mode 与 mask，创立简单图案的灵魂
  • 应用随机变量，它能让一个 idea 变成有数漂亮的图案

接下来，开始组合之旅。

应用 mix-blend-mode

mix-blend-mode，混合模式。最常见于 photoshop 中，是 PS 中非常弱小的性能之一。在 CSS 中，咱们能够利用混合模式将多个图层混合失去一个新的成果。

对于混合模式的一些根底用法，你能够参考我的这几篇文章：

  • 不堪设想的颜色混合模式 mix-blend-mode
  • 不堪设想的混合模式 background-blend-mode

而后，咱们来尝试第一个图案，先简略领会一下 mix-blend-mode 的作用。

咱们应用 repeating-linear-gradient 反复线性突变，制作两个角度相同的背景条纹图。失常而言，不应用混合模式，将两个图案叠加在一起，看看会产生什么。

额，会产生什么就有鬼了。不言而喻，因为图案不是通明的，叠加在一起之后，因为层叠的关系，只能看到其中一张图。

好，在这个根底上，咱们给 最上层 的图案，增加 mix-blend-mode: multiply，再来一次，看看这次会产生什么。

能够看到，增加了混合模式之后，两张背景图通过某种算法叠加在了一起，展现出了十分丑陋的图案成果，也正是咱们想要的成果。

CodePen Demo – Repeating-linear-gradient background & mix-blend-mode

尝试不同的 mix-blend-mode

那为什么下面应用的是 mix-blend-mode: multiply 呢？用其余混合模式能够不能够？

当然能够。这里仅仅只是一个示例，mix-blend-mode: multiply 在 PS 中意为 正片叠底，属于图层混合模式的变暗模式组之一。

咱们应用下面的 DEMO，尝试其余的混合模式，能够失去不同的成果。

能够看到，不同的混合模式的叠加，成果相差十分之大。当然，使用不同的混合模式，咱们也就能够发明出成果各异的图案。

CodePen Demo – Repeating-linear-gradient background & mix-blend-mode

借助 CSS-Doodle 随机生成图案

到这，就不得不引出一个写 CSS 的神器 — CSS-Doodle，我在其余十分多文章中也屡次提到过 CSS-doodle，简略而言，它是一个基于 Web-Component 的库。容许咱们疾速的创立基于 CSS Grid 布局的页面，并且提供各种便捷的指令及函数（随机、循环等等），让咱们能通过一套规定，失去不同 CSS 成果。

还是以下面的 DEMO 作为示例，咱们将 repeating-linear-gradient 生成的反复条纹背景的色彩、粗细、角度随机化、采纳的混合模式也是随机选取，而后利用 CSS-Doodle，疾速随机的创立各种基于此规定的图案：

能够点进去尝试一下，点击鼠标即可随机生成不同的成果：

CodePen Demo — CSS Doodle – CSS MIX-BLEND-MODE Background

尝试应用径向突变

当然，下面应用的是 线性突变 ，同样，咱们也能够应用 径向突变 使用同样的套路。

咱们能够应用径向突变，生成多重的径向突变。像是这样：

给图片利用上 background-size，它就会像是这样：

像上文一样，咱们略微对这个图形变形一下，而后叠加两个图层，给最上层的图形，增加 CSS 款式 mix-blend-mode: darken：

CodePen Demo — radial-gradient & mix-blend-mode Demo

借助 CSS-Doodle 随机生成图案

再来一次，咱们应用 CSS-Doodle，使用上述的规定在径向突变，也能够失去一系列有意思的背景图。

能够点进去尝试一下，点击鼠标即可随机生成不同的成果：

CodePen Demo — CSS Doodle – CSS MIX-BLEND-MODE Background 2

当然，上述的叠加都是非常简单的图案的叠加，然而把握了这个原理之后，就能够本人尝试，去发明更简单的交融。

上述的叠加成果是基于大片大片的实色的叠加，当然 mix-blend-mode 还能和真正的突变碰撞出更多的火花。

在不同的突变背景中使用混合模式

在不同的突变背景中使用混合模式？那会产生什么样美好的成果呢？

使用切当，它可能会像是这样：

umm，与下面的条纹图案齐全不一样的格调。

你能够戳进 gradienta.io 来看看，这里全是应用 CSS 创立的突变叠加的背景图案库。

应用混合模式叠加不同的突变图案

上面，咱们也来实现一个。

首先，咱们应用线性突变或者径向突变，随便创立几个突变图案，如下所示：

接着，咱们两两之间，从第二层开始，应用一个混合模式进行叠加，一共须要设定 5 个混合模式，这里我应用了 overlay, multiply, difference, difference, overlay。看看叠加之后的成果，十分的 Nice：

CodePen Demo — Graideint background mix

因为下面动图 GIF 的压缩率十分高，所以看上去锯齿很显著图像很含糊，你能够点进下面的链接看看。

而后，咱们能够再给叠加后的图像再加上一个 filter: hue-rotate()，让他动起来，放大一点点看看成果，绚丽夺目的光影成果：

CodePen Demo — Graideint background mix 2

借助 CSS-Doodle 随机生成图案

噔噔噔，没错，这里咱们又能够持续把 CSS-Doodle 搬出来了。

随机的突变，随机的混合模式，叠加在一起，燥起来吧。

应用 CSS-Doodle 随机创立不同的突变，在随机应用不同的混合模式，让他们叠加在一起，看看成果：

当然，因为是齐全随机生成的成果，所以局部时候生成进去的不算太难看或者间接是纯色的。不过大部分还是挺不错的

CodePen Demo — CSS Doodle Mix Gradient

感激保持，看到这里。上述上半局部次要应用的 混合模式，接下来，下半局部，将次要应用 mask，精彩持续。

应用 mask

除去混合模式，与背景相干的，还有一个十分有意思的属性 — MASK。

mask 译为遮罩。在 CSS 中，mask 属性容许使用者 通过遮罩或者裁切特定区域的图片的形式来暗藏一个元素的局部或者全副可见区域。

对 mask 的一些根底用法还不太熟悉的，能够先看看我的这篇文章 — 微妙的 CSS MASK。

简略而言，mask 能够让图片咱们能够灵便的管制图片，设定一部分展现进去，另外残余局部的暗藏。

应用 mask 对图案进行切割

举个例子。假如咱们应用 repeating-linear-gradient 突变制作这样一个突变图案：

它的 CSS 代码大略是这样：

:root {$colorMain: #673ab7;}
{
    background: 
        repeating-linear-gradient(0, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),
        repeating-linear-gradient(60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),
        repeating-linear-gradient(-60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px);
}

如果咱们给这个图案，叠加一个这样的 mask：

{mask: conic-gradient(from -135deg, transparent 50%, #000);
}

上述 mask 如果是应用 background 示意的话，是这样 background: conic-gradient(from -135deg, transparent 50%, #000), 图案是这样：

两者叠加在一起，依照 mask 的作用，背景与 mask 生成的突变的 transparent 的重叠局部，将会变得通明。将会失去这样一种成果：

CodePen Demo — mask & background Demo

咱们就实现了 background 与 mask 的联合。使用 mask 切割 background 的成果，咱们就能制作出十分多有意思的背景图案：

CodePen Demo — mask & background Demo

mask-composite OR -webkit-mask-composite

接下来，在使用 mask 切割图片的同时，咱们会再使用到 -webkit-mask-composite 属性。这个是十分有意思的元素，十分相似于 mix-blend-mode / background-blend-mode。

-webkit-mask-composite: 属性指定了将利用于同一元素的多个蒙幅员像互相合成的形式。

艰深点来说，他的作用就是，当一个元素存在多重 mask 时，咱们就能够使用 -webkit-mask-composite 进行成果叠加。

留神，这里的一个前提，就是当 mask 是多重 mask 的时候（相似于 background，mask 也是能够存着多重 mask），-webkit-mask-composite 才会失效。这也就元素的 mask 能够指定多个，逗号分隔。

假如咱们有这样一张背景图：

:root {
    $colorMain: #673ab7;
    $colorSub: #00bcd4;
}
div {background: linear-gradient(-60deg, $colorMain, $colorSub);
}

咱们的 mask 如下：

{
    mask: 
            repeating-linear-gradient(30deg, #000 0, #000 10px, transparent 10px, transparent 45px),
            repeating-linear-gradient(60deg, #000 0, #000 10px, transparent 10px, transparent 45px),
            repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 45px);
}

mask 表述成 background 的话大略是这样：

如果，不增加任何 -webkit-mask-composite，叠加交融之后的成果是这样：

如果增加一个 -webkit-mask-composite: xor，则会变成这样：

能够看到，线条的交汇叠加处，有了不一样的成果。

CodePen Demo — background & -webkit-mask-composite

借助 CSS-Doodle 随机生成图案

理解了基本原理之后，上 CSS-Doodle，咱们利用多重 mask 和 -webkit-mask-composite，便能够发明出各式各样的美好背景图案：

是不是很相似万花筒？

借助了 CSS-Doodle，咱们只设定大抵的规定，辅以随机的参数，随机的大小。接着就是一幅幅美好的背景图应运而生。

上面是使用上述规定的尝试的一些图案：

CodePen Demo — CSS Doodle – CSS MASK Background

当然，能够尝试变换形状，譬如让它长得像个手机壳。

上面两个 DEMO 也是综合使用了上述的一些技巧的示例，好像一个个手机壳的图案。

CodePen Demo — CSS Doodle – CSS MASK Background 2

CodePen Demo — CSS Doodle – CSS MASK Background 3

总结一下

背景 background 不仅仅只是纯色、线性突变、径向突变、角向突变。混合模式、滤镜、遮罩也并不孤单。

当 background 配合混合模式 mix-blend-mode，background-blend-mode、滤镜 filter、以及遮罩 mask 的时候，它们就能够组合变幻出各种不同的成果。

到目前为止，CSS 曾经越来越弱小，它不仅仅能够用于写业务，也能够发明很多有美感的事物，只有咱们违心去多加尝试，便能够发明出美好的图案。

最初

好了，本文到此结束，看到这里，你是不是也蠢蠢欲动？想本人亲手尝试一下？

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 ????

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

正文完
css
发表至： css
2021-02-05
 0
关于css:CSS基础
关于css:css设置inputtextarea的光标
关于css:聊聊那些css在ios中的兼容性
关于css:OS模块的应用