首页 > 其他分享 >css技巧混合模式

css技巧混合模式

时间:2024-07-20 09:55:51浏览次数:13  
标签:技巧 color 模式 混合 mix mode blend css

看上面这个神奇的效果,文字在黑色背景里面显示为白色,而在白色的背景里面显示为黑色,这就是文字智能适配背景。

看到这样的需求,大多数人第一时间想到的是,文字元素有两个,是完全重叠的两层,一层是黑色,一层是白色,然后通过遮罩实现,这里使用了CSS3 新增了一个属性 -- mix-blend-mode 混合模式来实现。

实现代码


<template>
    <div class="bg">
      <div class="text">Hello World!</div>
    </div>
  </template>
  <style scoped>
  .bg{
    background:url('/uploadUrl/dataroom/2024/07/19/1814116805079793665.png') no-repeat;
    background-size:100%;
    display:flex;
    align-items:center;
    width:677px;
    height:106px;
    justify-content:center;
    .text{
      color:#fff;
      font-size:50px;
      mix-blend-mode: difference;
    }
  }
  </style>
  

mix-blend-mode 概述

除去 initial 默认、inherit 继承 和 unset 还原这 3 个所有 CSS 属性都可以取的值外,还有另外的 16 个具体的取值,对应不同的混合效果。

{
  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;          // 还原
}

如果不是专业的 PSer 天天和混合模式打交道,想要记住这么多效果,还是挺困难的。不过有前人帮我们总结了一番,看看如何比较好的理解或者说记忆这些效果

当然,上图是 PS 中的混合模式,数量比 CSS 中的多出几个,但是分类还是通用的。

标签:技巧,color,模式,混合,mix,mode,blend,css
From: https://blog.csdn.net/lbking666666/article/details/140541296

相关文章

  • C#/.NET这些实用的编程技巧你都会了吗?
    DotNetExercises介绍DotNetGuide专栏C#/.NET/.NETCore编程常用语法、算法、技巧、中间件、类库练习集,配套详细的文章教程讲解,助你快速掌握C#/.NET/.NETCore各种编程常用语法、算法、技巧、中间件、类库等等。GitHub开源地址:https://github.com/YSGStudyHards/DotNetExercise......
  • 前端必修技能:高手进阶核心知识分享 - CSS伪类和伪元素
    前端必修技能:高手进阶核心知识分享-CSS伪类和伪元素前端必修技能:高手进阶核心知识分享-CSS伪类和伪元素在前端的工作中,经常会遇到伪类和伪元素,但很多人(包括我自己)都没有仔细的去分辨它们,归其原因,大概是因为:写法相似。但其实,伪类和伪元素还是有很多不同的。温......
  • lvs的nat和dr模式混合用
     lvs:10.0.0.200 vip 10.0.0.19外网IP,172.168.1.19内网IP drrs:10.0.0.200vip 10.0.0.18rip  natrs:172.168.1.17rip 客户端:10.0.0.14cip lvs机器: ipaddradd10.0.0.200/24devens33:0 IP:[root@mcw09~]#ipa1:lo:<LOOPBACK,UP,......
  • 奇妙的 c++ 混合运算式
    先来看看如下的式子:a*b+c当你在c++中运行它时,你很清楚它是先计算*再计算+的。那么请再来看看这个式子:a+b+c请问它是先执行第一个+,还是先执行第二个+呢?这个问题看上去无解,但实际上我们可以解答:#definelllonglonginta=INT_MAX,b=INT_MAX;llc......
  • 编织文字之美:WebKit的CSS文本格式化能力全解析
    编织文字之美:WebKit的CSS文本格式化能力全解析在网页设计中,文本不仅是传递信息的媒介,更是展现美学的重要元素。WebKit,作为Safari、QQ浏览器等众多浏览器的内核,提供了强大的CSS文本格式化支持。通过CSS,开发者可以对文本进行丰富的样式设计,从而提升用户体验和网站的视觉吸引......
  • tresos高手秘籍| xdm与arxml 一键互转技巧30秒速成!
    目录文章目标前提条件场景一:xdm文件转换arxml文件场景二:arxml文件转换xdm文件相关命令详细解释本文章主要为大家指导:如何使用EBtresos相关命令实现xdm与arxml文件快速相互转换。文章目标快速掌握如何使用tresos实现xdm与arxml互转示例场景xdm文件如何转换为......
  • 动态美学:WebKit中CSS转换与动画的魔力
    动态美学:WebKit中CSS转换与动画的魔力在现代网页设计中,CSS转换(Transforms)和动画(Transitions)是实现动态效果的两大法宝。它们能够为用户带来流畅、直观的交互体验。WebKit,作为Safari、QQ浏览器等众多浏览器的核心引擎,对CSS转换和动画提供了全面的支持。本文将深入探讨WebKit......
  • Git使用技巧
    rebase&merge先说结论,rebase比较适用于私人分支,可以把主干分支上其他人开发的功能拉到自己的分支上,并且是一条线;merge则主要适用于主分支,可以将其他人的代码合并上去,因为要保留主分支的完整历史记录。Merge​ rebasesquash主要用于合并commit,简化分支。交互......
  • 视频字幕提取怎么做?一键提取字幕的技巧不容错过
    作为一名电商从业者,热衷于不断学习和探索。因此,俺经常收藏那些内容丰富的视频或录制重要的会议视频。然而,将这些视频文字提取出来,成为了一项极其耗时且繁琐的任务。于是,经过一番摸索和尝试,总结出了一套高效的视频字幕提取方法,现在就将这些方法分享给所有同样面临这一难题的电......
  • CSS实现点击翻转效果
    1、先看效果就是点击之后反转成蓝色的过程,不知道用什么软件能录制个gif(如果你有什么好的录制gif软件可以告诉我,哈哈),就将就着看吧。上代码,html版本<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-wi......