内容简介:为一张彩色图片增加染色效果变成灰度图片或者为灰度模式的图片增加染色效果变成彩色图片的css实现方式,有基于滤镜,基于混合模式的实现方式。我们来为彩色图片添加一个灰色的染色效果,可以使用多个滤镜组合的方式来实现。 首先使用的是sepia(),它会给图片增加一种深褐色的染色效果,值为100%则完全是深褐色,值为0%图像无变化,若值在0-100,则是效果的线性乘子。现在的图片是呈现深褐色。我们还需要更高的主色调饱和度,接下来使用saturate() 滤镜来给每个像素提升饱和度,saturate的值0-100%分别
为一张彩色图片增加染色效果变成灰度图片或者为灰度模式的图片增加染色效果变成彩色图片的css实现方式,有基于滤镜,基于混合模式的实现方式。
基于滤镜的实现方式
我们来为彩色图片添加一个灰色的染色效果,可以使用多个滤镜组合的方式来实现。 首先使用的是sepia(),它会给图片增加一种深褐色的染色效果,值为100%则完全是深褐色,值为0%图像无变化,若值在0-100,则是效果的线性乘子。现在的图片是呈现深褐色。
filter: sepia(100%); 复制代码
我们还需要更高的主色调饱和度,接下来使用saturate() 滤镜来给每个像素提升饱和度,saturate的值0-100%分别表示完全不饱和与图片无变化,若超过100%则有更高的饱和度。我们将saturate的值设为200%,这两个滤镜的组合会让图片具有一种橙黄色的染色效果。
filter: sepia(100%) saturate(200%); 复制代码
但是此时还不能满足我们的效果,我们还需要使用另外一个滤镜hue-rotate() 滤镜,把每个像素的色相以指定的度数进行偏移。我们将值设置在160deg左右,即可实现一个灰色的染色效果,并且添加动画效果。
<img src="test.jpg" alt="test" /> 复制代码
css实现:
img { transition: .5s filter; filter: sepia(100%) saturate(200%) hue-rotate(160deg); } img: hover { filter: none; } 复制代码
效果如下图所示:
基于混合模式的实现方式
接下来我们来给图片添加红色的染色效果,我们需要用到的是luminosity混合模式,这种混合模式会保留上层元素的 HSL 亮度信息,并从它的下层吸取色相和饱和度信息。
要对一个元素设置混合模式,有两个属性可以派上用场:mix-blend- mode ,background-blend-mode 。 第一种属性: mix-blend- mode可以为整个元素设置混合模式,使用该属性需要把图片包裹在一个容器中,并把容器的背景色设置为我们想要的主色调。
<p> <img src="test.jpg" alt="test" /> </p> 复制代码
css实现 :
p{ width: 400px; height: 300px; background: hsl(335, 100%, 50%); } img { width: 100%; height: 100%; mix-blend-mode: luminosity; } 复制代码
第二种属性:background-blend-mode 可以为每层背景单独指定混合模式。使用该属性不用图片元素,而是用
元素——把这个元素的第一层背景设置为要染色的图片,并把第二层的背景设置为我们想要的主色调。
<div class="test-image"> 复制代码
css实现:
.test-image { width: 400px; height: 300px; background-image:url(test.jpg); background-size: cover; background-color: transparent; background-blend-mode: luminosity; transition: .5s background-color; } .test-image:hover { background-color: hsl(335, 200%, 50%); } 复制代码
最终效果如图所示:
不过,这两种方法都不够理想。它们的主要问题在于: 第一种属性的实现不能实现动画效果 第二种属性的实现,在语义上,这个元素并不是一张图片,因此并不会被读屏器之类的设备读出来
以上所述就是小编给大家介绍的《实现图片染色效果的三种方式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
精通数据科学:从线性回归到深度学习
唐亘 / 人民邮电出版社 / 2018-5-8 / 99.00元
数据科学是一门内涵很广的学科,它涉及到统计分析、机器学习以及计算机科学三方面的知识和技能。本书深入浅出、全面系统地介绍了这门学科的内容。 本书分为13章,最初的3章主要介绍数据科学想要解决的问题、常用的IT工具Python以及这门学科所涉及的数学基础。第4-7章主要讨论数据模型,主要包含三方面的内容:一是统计中最经典的线性回归和逻辑回归模型;二是计算机估算模型参数的随机梯度下降法,这是模型工......一起来看看 《精通数据科学:从线性回归到深度学习》 这本书的介绍吧!
HTML 编码/解码
HTML 编码/解码
XML 在线格式化
在线 XML 格式化压缩工具