背景色+渐变背景+背景融合滤镜

马黑黑

先看看以下盒子的效果：

这看上去是用我们介绍过的 radial-gradient 弄的，四个个颜色，白色 white、绿色 green、灰色 gray以及蓝色 blue，其中真正起渐变作用的是灰色和蓝色，之前的两种颜色被控制在一定的半径之内，形成一个圆形的东东（绿色部分）加高光（白色部分）。的确，如果你真的这样设定背渐变景色，效果就是如此，但是很遗憾，我是这样设定背景色和渐变背景色的：

   margin: auto;
   width: 400px;
   height: 300px;
   background-color: #000;
   background-image: radial-gradient(circle, white 2px, green 32px, gray 36px,blue), 
	linear-gradient(120deg, pink,tan);

相信你能看得出来，背景色我设置为黑色 #000，渐变背景我用了一个径向渐变 radia-gradient 和一个线性渐变 linear-gradient，整个效果其实真的只有径向渐变的效果，线性渐变的粉红色 pink 和 黄褐色 tan 并未显示出来，其原理和使用多张背景图片的情形一致：多背景图片时，如果背景图片都是默认占满整个盒子的话，则前面的图片（颜色）覆盖后面的图片（颜色）。既然如此，我为什么要设置背景颜色和线性渐变颜色呢？因为我们要请出一位大神，我们之前业已了解过的背景融合滤镜 ground-blend-mode，我们在上述CSS的基础上加入一句：

   background-blend-mode: difference, lighten;

这里加了两个 background-blend-mode 滤镜，difference 和 lighten，其具体作用请查阅我之前的专题帖子，在此解释一下两个滤镜的作用对象：difference 作用于第一个渐变即径向渐变 radial-gradient，它产生的融合效果基于背景颜色 background-color 和自身，lighten作用于第一个渐变 radial-gradient 和第二个渐变 linear-gradient，对于 radial-gradient，同样基于背景颜色 background-color 和自身，对于linear-gradient，则基于前面的综合颜色效果和自身。这会得出什么神奇的效果？请看——

樵歌

第二幅像宇宙中的黑洞一样

马黑黑

樵歌 发表于 2022-4-20 20:22
第二幅像宇宙中的黑洞一样

黑洞不是酱紫的，几乎是整个儿黑的，外面会有一点点蓝光

红影

“如果背景图片都是默认占满整个盒子的话，则前面的图片（颜色）覆盖后面的图片（颜色）。”
记得在设置位置什么的时候，是后设置的覆盖前面设置的。图片是相反呢。
嗯，这么说，线性的两种颜色不是不存在，而是被遮盖了。当用滤镜混合的时候，就出现了。

红影

“两个滤镜的作用对象：difference 作用于第一个渐变即径向渐变 radial-gradient，它产生的融合效果基于背景颜色 background-color 和自身，lighten作用于第一个渐变 radial-gradient 和第二个渐变 linear-gradient，对于 radial-gradient，同样基于背景颜色 background-color 和自身，对于linear-gradient，则基于前面的综合颜色效果和自身。”

还可以同时设置两种滤镜效果啊。如果没有lighten，那么就只是径向渐变和底色黑色的混合了？如果只有lighten呢，又是怎样的？我去本地试试看看。。。。

红影

只有lighten的

                               
登录/注册后可看大图

红影

只有difference的：

                               
登录/注册后可看大图

红影

我是用抓图的，不是用在这个帖子里用代码的
好像只有difference的和使用两种效果的差不多呢。

红影

其实对于渐变的位置，貌似只知道它的开始，不知道它的终点，尤其越靠近外侧的。比如上面的灰色 gray 它应该是从36px开始参与渐变，却看不出它的渐变到哪里是终止，只是跟蓝渐次混合着。

加林森

来学习

马黑黑

加林森 发表于 2022-4-21 18:15
来学习

加林森

马黑黑 发表于 2022-4-21 20:19

谢茶

马黑黑

加林森 发表于 2022-4-21 20:28
谢茶

不客气

加林森

马黑黑 发表于 2022-4-22 19:09
不客气

老黑吃没有？