背景色+渐变背景+背景融合滤镜
本帖最后由 马黑黑 于 2022-4-20 20:05 编辑 <br /><br /><style>.bgDiv {
margin: auto;
width: 600px;
height: 420px;
background-color: #000;
background-image: radial-gradient(circle, white 2px, green 32px, gray 36px,blue), linear-gradient(120deg, pink,tan);
}
</style>
<p>先看看以下盒子的效果：<br><br></p>
<div class="bgDiv"></div>
<p><br><br>这看上去是用我们介绍过的 radial-gradient 弄的，四个个颜色，白色 white、绿色 green、灰色 gray以及蓝色 blue，其中真正起渐变作用的是灰色和蓝色，之前的两种颜色被控制在一定的半径之内，形成一个圆形的东东（绿色部分）加高光（白色部分）。的确，如果你真的这样设定背渐变景色，效果就是如此，但是很遗憾，我是这样设定背景色和渐变背景色的：<br><br></p>
<pre> <span style="color: blue;">margin</span>: auto;
<span style="color: blue;">width</span>: 400px;
<span style="color: blue;">height</span>: 300px;
<span style="color: blue;">background-color</span>: #000;
<span style="color: blue;">background-image</span>: radial-gradient(circle, white 2px, green 32px, gray 36px,blue),
linear-gradient(120deg, pink,tan);
</pre>
<p><br>相信你能看得出来，背景色我设置为黑色 #000，渐变背景我用了一个径向渐变 radia-gradient 和一个线性渐变 linear-gradient，整个效果其实真的只有径向渐变的效果，线性渐变的粉红色 pink 和 黄褐色 tan 并未显示出来，其原理和使用多张背景图片的情形一致：多背景图片时，如果背景图片都是默认占满整个盒子的话，则前面的图片（颜色）覆盖后面的图片（颜色）。既然如此，我为什么要设置背景颜色和线性渐变颜色呢？因为我们要请出一位大神，我们之前业已了解过的背景融合滤镜 ground-blend-mode，我们在上述CSS的基础上加入一句：<br><br></p>
<p> <span style="color: blue;">background-blend-mode</span>: difference, lighten;<br><br></p>
<p>这里加了两个 background-blend-mode 滤镜，difference 和 lighten，其具体作用请查阅我之前的专题帖子，在此解释一下两个滤镜的作用对象：difference 作用于第一个渐变即径向渐变 radial-gradient，它产生的融合效果基于背景颜色 background-color 和自身，lighten作用于第一个渐变 radial-gradient 和第二个渐变 linear-gradient，对于 radial-gradient，同样基于背景颜色 background-color 和自身，对于linear-gradient，则基于前面的综合颜色效果和自身。这会得出什么神奇的效果？请看——<br><br></p>
<div class="bgDiv" style="background-blend-mode: difference, lighten;"></div>
第二幅像宇宙中的黑洞一样{:4_174:} 樵歌 发表于 2022-4-20 20:22
第二幅像宇宙中的黑洞一样
黑洞不是酱紫的，几乎是整个儿黑的，外面会有一点点蓝光 “如果背景图片都是默认占满整个盒子的话，则前面的图片（颜色）覆盖后面的图片（颜色）。”
记得在设置位置什么的时候，是后设置的覆盖前面设置的。图片是相反呢。
嗯，这么说，线性的两种颜色不是不存在，而是被遮盖了。当用滤镜混合的时候，就出现了。 “两个滤镜的作用对象：difference 作用于第一个渐变即径向渐变 radial-gradient，它产生的融合效果基于背景颜色 background-color 和自身，lighten作用于第一个渐变 radial-gradient 和第二个渐变 linear-gradient，对于 radial-gradient，同样基于背景颜色 background-color 和自身，对于linear-gradient，则基于前面的综合颜色效果和自身。”
还可以同时设置两种滤镜效果啊。如果没有lighten，那么就只是径向渐变和底色黑色的混合了？如果只有lighten呢，又是怎样的？我去本地试试看看。。。。 只有lighten的
https://pic.imgdb.cn/item/6260a5a1239250f7c53249e9.png 只有difference的：
https://pic.imgdb.cn/item/6260a614239250f7c532d0a5.png 我是用抓图的，不是用在这个帖子里用代码的{:4_173:}
好像只有difference的和使用两种效果的差不多呢。 其实对于渐变的位置，貌似只知道它的开始，不知道它的终点，尤其越靠近外侧的。比如上面的灰色 gray 它应该是从36px开始参与渐变，却看不出它的渐变到哪里是终止，只是跟蓝渐次混合着。 来学习 加林森 发表于 2022-4-21 18:15
来学习
{:4_190:} 马黑黑 发表于 2022-4-21 20:19
谢茶 加林森 发表于 2022-4-21 20:28
谢茶
不客气 马黑黑 发表于 2022-4-22 19:09
不客气
老黑吃没有？
页:
[1]