内容简介:如果「一图胜千言」,那多图混合创造的效果要超过千言万语。同理,CSS 的混合模式为设计带来的可能性远远超出了你的想象。你所听到的 CSS 混合模式,就是三个被现代浏览器所广泛支持的 CSS 属性。这三个属性包含了:不过,本文主要聚焦在
一、前言
如果「一图胜千言」,那多图混合创造的效果要超过千言万语。同理,CSS 的混合模式为设计带来的可能性远远超出了你的想象。
你所听到的 CSS 混合模式,就是三个被现代浏览器所广泛支持的 CSS 属性。这三个属性包含了:
-
background-blend-mode
:用于混合元素背景图案、渐变和颜色 -
mix-blend-mode
:用于元素与元素之间的混合 -
isolation
:用户阻止某些元素在mix-blend-mode
使用时被混合
不过,本文主要聚焦在 background-blend-mode
这个支持度最好的属性上,它能给你带来以往只有 Photoshop 才能做到的引人注目的效果。
二、CSS 渐变和 background-blend-mode 组合
我们使用 background
属性来设置 CSS 渐变,常用的值如 linear-gradient()
, radial-gradient()
, repeating-linear-gradient()
以及 repeating-radial-gradient()
,而且 background
属性还能支持多个渐变参数,通过逗号来分隔。Lea Verou 为我们展示了通过多个渐变属性创造的印象深刻的 排列图案 ,如棋盘、砖块和星星。
但如今有了 background-blend-mode
属性,我们可以创造更多变化多样的效果。
1. 光谱背景
我们通过覆盖三层渐变来创造一个近乎全波段光谱的图像,展示再大家面前。
.spectrum-background { background: linear-gradient(red, transparent), linear-gradient(to top left, lime, transparent), linear-gradient(to top right, blue, transparent); background-blend-mode: screen; }
以往实现上面的效果只能通过图片,而且图片体积非常的大。而通过 CSS 只需要几行代码即可实现这种效果,更不用说对 HTTP 请求数据量的节省了。
2. 条纹网格背景
同样的,通过这个属性我们可以实现出一些有趣的条纹网格背景来:
.plaid-background { background: repeating-linear-gradient( -45deg, transparent 0, transparent 25%, dodgerblue 0, dodgerblue 50% ), repeating-linear-gradient( 45deg, transparent 0, transparent 25%, tomato 0, tomato 50% ), repeating-linear-gradient( transparent 0, transparent 25%, gold 0, gold 50% ), white; background-blend-mode: multiply; background-size: 100px 100px; }
3. 圆圈环绕背景
再来试点别的,这次通过径向渐变来实现圆圈环绕背景:
.circles-background { background: radial-gradient( khaki 40px, transparent 0, transparent 100% ), radial-gradient( skyblue 40px, transparent 0, transparent 100% ), radial-gradient( pink 40px, transparent 0, transparent 100% ), snow; background-blend-mode: multiply; background-size: 100px 100px; background-position: 0 0, 33px 33px, -33px -33px; }
4. 更多背景
在 Yoksel 和 Una Kravets 的帮助下,我制作了一个混合模式下的渐变图案 集合 ,可以让你快速的在自己的网站里使用。
三、图片效果和 background-blend-mode 组合
因为 background-image 允许我们在一个元素中添加多个渐变,同理我们也可以设置多张背景图片在同一元素中。当多张图片融合了 background-blend-mode
和 filter
属性,图片的效果更加有趣:
1. 素描效果
我们可以通过 CSS 让左图的图片看起来像素描一样。不需要 Photoshop、HTML canvas、WebGL 或者 JavaScript 库,5 个 CSS 属性就足够了。
首先是 HTML 代码:
<div class=”pencil-effect”></div>
然后添加两张 chapel.jpg 图片:
.pencil-effect { background: url(chapel.jpg), url(chapel.jpg); background-size: cover; }
下图左一就是我们的第一步的效果:
现在我们为它添加一个混合模式,效果如 图二 :
background-blend-mode: difference;
你会发现图二一片漆黑,difference 这种混合模式会将两张图片中每个像素点之间深色的像素去掉。假如你依旧疑惑,我们不妨通过 background-position
和 calc()
来实现一些位置上的偏差。
background-position: calc(50% — 1px) calc(50% — 1px), calc(50% + 1px) calc(50% + 1px);
设置好两张背景图片的位置偏移后,现在我们可以看到图片中景物的边框了,如图三所示:
最后,通过添加 filter 属性,我们对图片进行反相和透明度和明度调整:
filter: brightness(3) invert(1) grayscale(1);
以下是完整的代码片段:
.pencil-effect { background: url(photo.jpg), url(photo.jpg); background-size: cover; background-blend-mode: difference; background-position: calc(50% — 1px) calc(50% — 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(3) invert(1) grayscale(1); }
最终效果如下 图四 所示:
2. 黑板效果
基于上面的素描效果,我们通过调整一个 CSS 属性即可实现上图二的黑板报效果,把 filter 属性直接设置为 invert(1)
即可。
3. 夜视效果
接下来通过 CSS 混合模式让图片看起来像通过夜视仪观察到的效果。首先设置好背景图片和相关样式(图一所示):
background: url(moose.jpg); background-size: cover; background-position: center;
现在我们假如渐变和混合模式,这里加入的是一个具有一定透明度的黑色径向渐变:
background: url(moose.jpg), radial-gradient( rgba(0,255,0,.8), black ); background-blend-mode: overlay;
还不错,但可以继续优化。我有一些办法可以让图片看起来更加可信,通过加入一些扫描线到图片上并重复平铺(如图三):
background: url(moose.jpg), radial-gradient( rgba(0,255,0,.8), black ), repeating-linear-gradient( transparent 0, rgba(0,0,0,.2) 3px, transparent 6px );
完整代码如下:
.night-vision-effect { background: url(moose.jpg), radial-gradient( rgba(0,255,0,.8), black ), repeating-linear-gradient( transparent 0, rgba(0,0,0,.2) 3px, transparent 6px ); background-blend-mode: overlay; background-size: cover; }
四、浏览器兼容和优雅降级
好消息是 background-blend-mode
在 Firefox、Chrome 和 Opera 上兼容性良好。同时 Safari 中同样支持上述我们所列举的所有效果,目前 Safari 不支持的混合模式有: saturation
, hue
, color
以及 luminosity
。而 IE 浏览器则全部不支持。
这意味着我们需要考虑不支持混合模式的浏览器,通过 CSS 的 @supports 可以让这件事更加简单。第一个案例我们可以通过 @supports 检测混合模式支持度,并在不支持的时候做一个降级:
.spectrum-background { background: gray;
@supports (background-blend-mode: screen) {
background:
linear-gradient(red, transparent),
linear-gradient(to top left, lime, transparent),
linear-gradient(to top right, blue, transparent);
background-blend-mode: screen;
}
}
我们也可以检测多个 CSS 属性,如下:
.pencil-effect { background-image: url(photo.jpg); background-size: cover;
@supports (background-blend-mode: difference) and (filter: invert(1)) {
background-image:
url(photo.jpg),
url(photo.jpg);
background-blend-mode: difference;
background-position:
calc(50% — 1px) calc(50% — 1px),
calc(50% + 1px) calc(50% + 1px);
filter: brightness(3) invert(1) grayscale(1);
}
}
最后我们就可以放心的使用混合模式,给网页图片带来更多想象空间。
本文翻译自 logrocket : https://blog.logrocket.com/advanced-effects-with-css-background-blend-modes-4b750198522a
以上所述就是小编给大家介绍的《用 CSS 背景混合模式制作高级效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。