字体随背景颜色改变

合集 - 前端问题记录(8)

1.字体随背景颜色改变2024-07-30

2.自定义协议URL protocal 在网页端打开本地应用程序2024-07-303.在https的页面中调用http的接口会报错的问题2024-07-304.手写签名组件-jSignature2024-07-305.基于vue的图片裁剪vue-cropper2024-07-306.鬼屎玩意 DataTabel 的一些配置详解2024-07-307.webpack代理问题排查2024-07-308.JS中?.、??、??=的含义以及用法2024-07-30

收起

需要用到的css属性：mix-blend-mode

参考链接：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mix-blend-mode

各属性介绍：

mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //继承
mix-blend-mode: unset; //复原

要点：
若想实现空白部分字体显示颜色A，有背景部分字体显示白色，则需要一个颜色A的纯色的背景
(参考样例一，其中的纯色背景为#blackbg)

样例：
----------------------------样例一-----------------------------------
css 部分:

/* A white bottom layer */
#whitebg {
    position: absolute;
    width: 400px;
    height: 200px;
    
    background: white;
    z-index: 1
}


/* A black layer on top of the white bottom layer */
#blackbg {
    position: absolute;
    width: 200px;
    height: 200px;
    
    background-color: black;
    z-index: 2
}

/* A red DIV over the scene with the blend-mode set to 'screen' */
#makered {
    position: absolute;
    width: 400px;
    height: 200px;

    background-color: red;
    background-size: auto 100%;
    mix-blend-mode: screen;
    z-index: 4
}

span {
    position: absolute;
    font-family: Arial, Helvetica;
    font-size: 100px;
    mix-blend-mode: difference;
    color: white;
    z-index: 3
}

html部分:

<div id="whitebg"></div>
<div id="blackbg"></div>
<div id="makered"></div>
<span>testtest</span>

--------------------------------样例二--------------------------------------

css 部分:

.circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    mix-blend-mode: screen;
    position: absolute;
}

.circle-1 {
    background: red;
}

.circle-2 {
    background: lightgreen;
    left: 40px;
}

.circle-3 {
    background: blue;
    left: 20px;
    top: 40px;
}

.isolate {
    isolation: isolate; 
    position: relative;
}

html部分:

<div class="isolate">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
</div>