css 更换图片颜色

使用 mix-blend-mode 实现图片任意颜色赋值技术。

CSS3 新增了一个很有意思的属性 – mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。

混合模式最常见于 photoshop 中，是 PS 中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在 CSS 中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。
假设我们有这样一张图片，JPG、PNG、GIF 都可以，但是有一个前提要求，就是黑色纯色，背景白色：

<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: solid
 * @Date: 2022-06-16 18:14:59
 * @LastEditors: solid
 * @LastEditTime: 2022-07-06 17:17:47
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="pic">原图</div>
<div class="pic pic1">红色</div>
<div class="pic pic2">灰色</div>
<div class="pic pic3">渐变色</div>

</body>

</html>
<style>

.pic {
    width: 200px;
    height: 200px;
    margin: 50px;
    text-align: center;
    font-size: 42px;
    line-height: 420px;
    float: left;
    background-image: url(https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png);
    background-size: cover;
}

.pic1 {
    background-image: url(https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png), linear-gradient(#f00, #f00);
    background-blend-mode: lighten;
    background-size: cover;
}

.pic2 {
    background-image: url(https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png), linear-gradient(#333, #333);
    background-blend-mode: lighten;
    background-size: cover;
}

.pic3 {
    background-image: url(https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png), linear-gradient(#f00, #00f);
    background-blend-mode: lighten;
    background-size: cover;
}
</style>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/61511.html

css 更换图片颜色

css 更换图片颜色

相关推荐

分享到: