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

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

通过本文,你将会了解到 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-gradeintrepeating-radial-gradeint),它能减少很多代码量
  • transparent 透明无处不在
  • 尝试 mix-blend-modemask,创建复杂图案的灵魂
  • 使用随机变量,它能让一个 idea 变成无数美丽的图案

接下来,开始组合之旅。

使用 mix-blend-mode

mix-blend-mode ,混合模式。最常见于 photoshop 中,是 PS 中十分强大的功能之一。在 CSS 中,我们可以利用混合模式将多个图层混合得到一个新的效果。

关于混合模式的一些基础用法,你可以参考我的这几篇文章:

然后,我们来尝试第一个图案,先简单体会一下 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-modebackground-blend-mode、滤镜 filter、以及遮罩 mask 的时候,它们就可以组合变幻出各种不同的效果。

到目前为止,CSS 已经越来越强大,它不仅仅可以用于写业务,也可以创造很多有美感的事物,只要我们愿意去多加尝试,便可以创造出美妙的图案。

最后

好了,本文到此结束,看到这里,你是不是也跃跃欲试?想自己亲手尝试一下?

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

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

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

CSS奇思妙想 -- 使用 background 创造各种美妙的背景的更多相关文章

  1. css background之设置图片为背景技巧

    css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...

  2. Django中CSS加载background url('')问题

    Django中CSS加载background url('')问题   在django中, 默认CSS中如果有 background url('images/a.jpg') 这类的属性,会被django ...

  3. css 中的background:transparent到底是什么意思有什么作用

    有时我在看css时,看到有的css属性定义为background:transparent.意思就是背景透明.实际上background默认的颜色就是透明的属性.所以写和不写都是一样的 有段时间没写文章 ...

  4. css background之设置图片为背景技巧

    原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那 ...

  5. css为网页顶部和底部都加入背景图

    网页背景图是我们常用的功能,一般来说.给网页加一个背景图,只要在网页的body标签中加入css属性就行. 代码如下:<body style="background-image:url( ...

  6. 【CSS学习笔记】初始化CSS后,写li,并利用背景图片,来完成li小图标的效果,且达到个浏览器兼容

    第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复, ...

  7. css 尺寸、边框、内边距、背景以及css Sprite

    上节课回顾: HTML标签: 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签,无任何特殊意义 HTML标签 :文本 <em> ...

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

    本文属于 CSS 绘图技巧其中一篇.之前有过一篇:在 CSS 中使用三角函数绘制曲线图形及展示动画 想写一篇关于 CSS 创造艺术的文章已久,本文主要介绍如何借助 CSS-doodle ,利用 CSS ...

  9. css样式之background详解

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

随机推荐

  1. 递归的三部解题曲 关联leetcode 104. 二叉树最大深度练习

    递归关心的三点 1. 递归的终止条件 2. 一级递归需要做什么 3. 返回给上一级递归的返回值是什么 递归三部曲 1. 找到递归的终止条件:递归什么时候结束 2. 本级递归做什么:在这级递归中应当完成 ...

  2. 附录 A ES6附加特性

    目录 模板字符串 解构 对象的解构 数组的解构 增强版对象字面量 模板字符串 const student = { name: "Wango", age: 24, } // 普通字符 ...

  3. 机器学习笔记·adaboost

    一.算法简介 Adaboost算法是一种集成算法,所谓集成算法就是将多个弱的分类器组合在一起变成一个强的分类器.弱分类器通常是指分类效果比随机分类稍微好一点的分类器.就像我们在做一个重要决定的时候,通 ...

  4. MySQL 设置保留几天的binlog

    1 ) 查看默认的日志保存天数: mysql> show variables like 'expire_logs_days'; +------------------+-------+ | Va ...

  5. Flask+pin

    Flask+SSTI的新火花 记一次buu刷题记和回顾祥云杯被虐出屎的经历.题目:[GYCTF2020]FlaskApp 一 题目初见 朴实无华的页面,一个base64的小程序页面 看到有提示. 我就 ...

  6. 零基础怎么学Python编程,新手常犯哪些错误?

    Python是人工智能时代最佳的编程语言,入门简单.功能强大,深获初学者的喜爱. 很多零基础学习Python开发的人都会忽视一些小细节,进而导致整个程序出现错误.下面就给大家介绍一下Python开发者 ...

  7. uni-app开发经验分享二十: 微信小程序 授权登录 获取详细信息 获取手机号

    授权页面 因为微信小程序提供的 权限弹窗 只能通用户确认授权 所以可以 写一个授权页面,让用户点击 来获取用户相关信息 然后再配合后台就可以完成登录 <button class="bt ...

  8. JVM(八)执行引擎相关内容

    一:两种解释器 JAVA字节码解释器: java字节码===>c++代码==>硬编码. 首先.java文件编译成字节码,遍历每行的字节码指令,因为每个字节码指令的含义都是固定的所以可以根据 ...

  9. windows激活密钥

    密钥来源,微软官方 KMS 客户端安装密钥 | Microsoft Docs Windows Server 2008 R2 操作系统版本 KMS 客户端安装程序密钥 Windows Server 20 ...

  10. (01)-Python3之--字符串操作

    1.字符串切片取值 字符串的取值通过索引来读取,从0开始. 取区间值如下:字符串变量名[起始索引:结束索引].包含起始,但不包含结束.例如: str_my = "hello,python!我 ...