《css揭秘》笔记(十三),染色效果
发布日期:2022-02-15 02:36:20 浏览次数:1 分类:技术文章

本文共 1327 字,大约阅读时间需要 4 分钟。

染色效果

染色效果,为一幅灰度图片(或是被转换为灰度模式的彩色图片)添加染色效果,可以为不同风格的额照片带来视觉上的一致性。

基于滤镜的解决方案

sepia(),降低饱和度的橙黄色染色效果,几乎像素的色相值会被收敛到35~40.

使用saturate()滤镜可以给像素提升饱和度,具体饱和度取决于实际情况。

hue-rotate滤镜可以为每个像素的色相以指定度数进行偏移。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2jkja7Bk-1590461547050)(4视觉效果/img/66.png)]

.box1{

 filter: sepia(1) saturate(3) hue-rotate(290deg);}
   
     
    
   

上述代码的作用效果是:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-etgzcbrh-1590461547052)(4视觉效果/img/67.png)]

混合模式解决方案

混合模式控制了上层元素的颜色与下层颜色进行混合的方式,用它来实现染色效果,需要用到的混合模式是luminosity,这种luminosity混合模式会保留上层元素的HSL高度信息,并从它的下层吸取色相饱和度信息。把下层元素设置成我们想要的主色调,而把待处理的图片放在上层并设置成这种混合模式,本质上就是在染色。

如果要对一个元素设置混合模式,有两个属性可以发挥作用:min-blend-mode可以为整个元素设置混合模式,background-blend-mode可以为每层背景单独设置混合模式。

有两种方式可以处理我们的图片:

  1. 第一种选择,把需要处理的图片包裹进一个容器中,并把容器的背景色设置成我们想要的主色调。

  2. 第二种选择,不用图片元素,而是用<div>元素,把这个元素第一层背景设置成要染色的图片,并把第二层背景设置我们想要的主色调。

针对第一种情况,假如这个图片是个超链接,那么它会被包裹进<a>元素中,为<a>元素的背景颜色设置成主色调颜色,在为图片<img>使用混合模式就能得到染色的图片效果。

.box2{

 display: inline-block;  background: hsl(355, 100%, 50%);}.box2>img{
 mix-blend-mode: luminosity;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ln7gDoB3-1590461547053)(4视觉效果/img/68.png)]

我们如果想要给混合模式的图片设置一个从单色样式变化到彩色样式的css过渡效果,可以考虑使用background-blend-mode为图片设置混合模式后,先让过渡前的图片与我们想要的主色调的颜色混合,再让过渡后的图片与透明色混合,以此形成一个过渡效果。

.box3{

  width: 220px;   height: 150px;   background-size: cover;   background-color: hsl(355, 100%, 50%);   background-blend-mode: luminosity;   background-image: url(./img/66.png);   transition: .5s background-color;}.box3:hover{
  background-color: transparent;}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pCasEy12-1590461547056)(4视觉效果/img/69.gif)]

需要注意的是这种方式不够理想,图片大小会被写死,语义上这个元素不是图片,不会被读屏器读出来。

本文是《css揭秘》一书的笔记,如果侵犯到了原著作者的权益,请联系我删除。

转载地址:https://blog.csdn.net/PeZXO/article/details/106350522 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:《css揭秘》笔记(十二),投影效果
下一篇:TensorFlow2.x的安装

发表评论

最新留言

做的很好,不错不错
[***.36.148.84]2022年08月02日 09时26分13秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章