法一:基于滤镜
sepia()
,它会给图片增加一种降饱和度的橙黄色染色效果。
如果我们想好的主色调的饱和度比这高,可用saturate()
滤镜来给每个像素提升饱和度。
若不希望把图片调为橙黄色调,而是稍深的亮粉色,还需再添加一个hue-rotate()
滤镜,把每个像素的色相以指定的度数进行偏移。
例子:
<img src="husky.jpeg" alt=""></body>
img {
transition: .5s filter;
filter: sepia(1) saturate(4) hue-rotate(295deg);
}
img:hover,
img:focus {
filter: none;
}
效果如下:
法二:混合模式
“混合模式”控制了上层元素的颜色与下层颜色进行混合的方式。
用它来实现染色效果时,需用到的混合模式是luminosity
这种luminosity
混合模式会保留上层元素的HSL亮度信息,并从它的下层吸取色相饱和度信息。
需要的属性:
mix-blend-mode
可为整个元素设置混合模式
background-blend-mode
可为每层背景单独指定混合模式
那么有两种实现方式:
- 把图片包裹在一个容器中,并把容器的背景色设置为我们想要的主色调;
- 不用图片元素,而用
div
元素,把这个元素的第一层背景设置为要染色的图片,并把第二层背景设置为我们想要的主色调。
例子:
<div class="tinted-image" style="background-image: url(husky.jpeg);"></div>
.tinted-image {
width: 200px;
height: 200px;
background-size: cover;
background-color: hsl(335, 100%,50%);
background-blend-mode: luminosity;
transition: .5s background-color;
}
.tinted-image:hover {
background-color: transparent;
}
效果如下:
sepia [ˈsiːpiə] 深褐色,棕褐色
saturate [ˈsætʃəreɪt] 饱和的
hue 颜色; 色度; 色调;
luminosity [ˌluːmɪˈnɒsəti] 亮度
blend 混合
参考:《css揭秘》