网站LOGO
白雾茫茫丶
页面加载中
7月21日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 白雾茫茫丶
    记录学习、生活和有趣的事
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    mix-blend-mode 利用混合模式让文字智能适配背景颜色
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

    mix-blend-mode 利用混合模式让文字智能适配背景颜色

    谢明伟 · 原创 ·
    前端开发技术分享 · CSS3
    共 2380 字 · 约 1 分钟 · 419
    本文最后更新于2023年12月28日,已经过了205天没有更新,若内容或图片失效,请留言反馈
    今天向大家推荐一个 CSS3 属性:mix-blend-mode,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合模式。

    文字智能适配背景颜色

    1. 这个效果就是在黑色背景中显示白色文字,在白色背景中显示黑色文字,而且是自动的:

      HTML 代码:
      <style>
      .main {
       width: 600px;
       height: 200px;
       background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
       position: relative;
       margin: 100px auto;
      }
      
      .main::before {
       content: '白雾茫茫丶';
       position: absolute;
       font-size: 50px;
       width: 100%;
       height: 100%;
       top: 40%;
       left: 20%;
       color: #fff;
       mix-blend-mode: difference;
       animation: move 3s infinite linear alternate;
      }
      
      @keyframes move {
       0% {
         transform: translateX(20%);
       }
      
       100% {
         transform: translateX(-20%);
       }
      }
       </style>
       <div class="main"></div>

      我们可以发现,代码非常简单,关键是这个属性:mix-blend-mode: difference

    2. 这是为什么呢?经过一番资料查阅,设置了这个属性后,它是这样计算的:

      TXT 代码:
        **黑底白字:**
        当前颜色:    255  255  255
        父元素:       0    0    0
        混合后的颜色:255   255  255
      
        **白底黑字:**
        当前颜色:    255  255  255
        父元素:      255  255  255
        混合后的颜色: 0    0    0

      由此可以得出结论:混合后的颜色 = 当前颜色 - 父元素背景色

    实现文字镂空效果

    HTML 代码:
    <style>
      .parent {
        background-image: url("./images/1.jpg");
        width: 600px;
        height: 400px;
        position: relative;
        margin: 100px auto;
      }
    
      .parent .child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 900;
        font-size: 50px;
        color: #000;
        background-color: #fff;
        mix-blend-mode: screen;
      }
    </style>
    <div class="parent">
      <div class="child">白雾茫茫丶</div>
    </div>

    mix-blend-mode 其他属性

    属性值描述
    normal默认值,没有混合效果
    multiply正片叠底
    screen滤色
    overlay叠加
    darken变暗
    lighten变亮
    color-dodge颜色减淡
    color-burn颜色加深
    hard-light强光
    soft-light柔光
    difference差值
    exclusion排除
    hue色相
    color颜色
    saturation饱和度
    luminosity亮度

    其它属性的效果,有兴趣的伙伴可以研究一下!

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    我要发表评论 我要发表评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 一天前 在线

    🕛

    本站已运行 2 年 202 天 4 小时 10 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事