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

本文共 1335 字,大约阅读时间需要 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的安装

发表评论

最新留言

哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年03月12日 23时53分28秒

关于作者

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

推荐文章

oracle存储过程调用sql文件,oracle - 在SQL Developer中运行存储过程? 2019-04-21
oracle同时报604和12507,V$SES_OPTIMIZER_ENV 查不到刚修改的隐含参数, 2019-04-21
zblog的php更换域名,zblogphp更换域名后,原zblog里使用了固定域名,登录不进去怎么办... 2019-04-21
oracle dnfs 配置,Source of Oracle参数解析(dnfs_batch_size) - django-\/\/ i K | 2019-04-21
oracle所需的环境,转:面对一个全新的oracle环境,首先应该了解什么? 2019-04-21
linux 小数四则运行,shell四则运算(整数及浮点数)的方法介绍 2019-04-21
linux系统分区后进入紧急模式,Linux系统的救援模式应用详解 2019-04-21
linux配置匿名ftp服务器,在Linux环境中使用vsftpd搭建ftp实现匿名上传详细配置 2019-04-21
linux创建硬盘分区lvm,LVM创建及分区调整、更换LVM硬盘 2019-04-21
FreeBSD可以安装Linux软件吗,在Linux服务器上面通过网络安装FreeBSD 2019-04-21
.net core linux 桌面应用,C# dotnet core + AvaloniaUI 开发桌面软件,hello world 2019-04-21
linux tcp 113错误,linux系统报tcp_mark_head_lost错误的处理方法 2019-04-21
南昌工程学院c语言答案,南昌工程学院C语言程序设计基础课件第3讲运算符和表达式... 2019-04-21
python学画画_python学画画(下) 2019-04-21
云栖社区 mysql_【直播结束,已更新回放】PG、MySQL到底哪个好?云栖说这次请来五位专家撕了一下-阿里云开发者社区... 2019-04-21
老男孩mysql 百度云_英语语录:除了你,没人能掌控你的幸福 2019-04-21
mysql驱动多次执行问题_Laravel5.2队列驱动expire参数设置带来的重复执行问题 数据库驱动... 2019-04-21
mysql获取刚新增的数据库_如何取得刚插入数据库的数据的id mysql 2019-04-21
python将10到1递减_(Python)如何将3个递减列表合并成一个递减列表? 2019-04-21
python脚本怎么用来处理数据_长时间运行数据处理python脚本的程序结构 2019-04-21