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

在 CSS 中使用三角函数绘制曲线图形及展示动画

CSS奇思妙想 -- 使用 CSS 创造艺术

将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性,制作一些稍微复杂、酷炫的背景。

通过本文,你将会了解到 CSS background 中更为强大的一些用法,并且学会利用 background 相关的一些属性,采用不同的方式,去创造更复杂的背景图案。在这个过程中,你会更好的掌握不同的渐变技巧,更深层次的理解各种不同的渐变。

同时,借助强大的 CSS-Doodle,你将学会如何运用一套规则,快速创建大量不同的随机图案,感受 CSS 的强大,走进 CSS 的美。

背景基础知识

我们都知道,CSS 中的 background 是非常强大的。

首先,复习一下基础,在日常中,我们使用最多的应该就是下面 4 种:

纯色背景 background: #000:

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

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

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

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

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

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

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

背景进阶

当然。掌握了基本的渐变之后,我们开始向更复杂的背景图案进发。我最早是在《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 重复线性渐变,制作两个角度相反的背景条纹图。正常而言,不使用混合模式,将两个图案叠加在一起,看看会发生什么。

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

额,会发生什么就有鬼了

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyyjjp.html