css 更换图片颜色

山与路

已于 2022-07-06 17:27:43 修改

阅读量3.9k

点赞数 1

分类专栏： css 文章标签： css photoshop 前端

于 2022-07-06 17:21:07 首次发布

本文链接：https://blog.csdn.net/a1309525802/article/details/125644064

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>