CSS 혼합 모드를 영리하게 사용하여 텍스트를 배경색에 맞게 지능적으로 조정

<p>

<p>페이지에 텍스트가 있습니다. 이 텍스트를 다양한 배경색으로 표시할 수 있나요? 이는 일반적으로 지능형 색상 변경으로도 알려져 있습니다. 이렇게:

<p>

<p> 텍스트는 검정색 배경에 흰색으로, 흰색 배경에 검정색으로 표시됩니다. 매우 복잡한 효과인 것 같지만 실제로 CSS에서 구현하는 것은 매우 쉽습니다. 오늘은 CSS에서 믹싱 모드 mix-blend-mode: Difference를 사용하는 방법을 소개하겠습니다. 텍스트를 지능적으로 만듭니다. 배경색을 조정합니다. [추천 학습: css 동영상 튜토리얼mix-blend-mode: difference，让文字智能适配背景颜色。【推荐学习：css视频教程】

混合模式 mix-blend-mode: difference

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

<p>

<p>其中，本文的主角是 mix-blend-mode: difference，意为差值模式。该混合模式会查看每个通道中的颜色信息，比较底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。

<p>与白色混合将使底色反相；与黑色混合则不产生变化。

<p>通俗一点就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。

<p>该混合模式最常见的应用场景就是文章开头描述的场景，实现文本在不同背景色下展示不同的颜色。

<p>最适合于黑白场景，非常简单的一个 DEMO：

<div></div>

div {
    height: 100vh;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);

    &::before {
        content: "LOREM IPSUM";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        mix-blend-mode: difference;
        animation: move 3s infinite linear alternate;
    }
}
@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%);
    }
}

<p>效果如下：

<p>

<p>CodePen Demo -- linear-gradient + Mix-blend-mode

<p>当然，不一定是黑色或者白色，看看下面这个例子，有这样一种场景，有的时候我们不太确定背景颜色的最终表现值（可能是后台配置，传给前端），但是又需要让文字能够在任何背景颜色下都正常展出，此时，也可以尝试使用 mix-blend-mode: difference。

<ul class="flex-box">
  <div class="box">
    <p>开通会员查看我的VIP等级</p>
  </div>
   // ..... 
</ul>

div {
    // 不确定的背景色
}
p {
    color: #fff;
    mix-blend-mode: difference;
}

<p>无论背景色是什么颜色，设置了 mix-blend-mode: difference 的 <p> 元素都可以正常展示出文本：

<p>

<p>CodePen Demo -- mix-blend-mode:difference实现文字颜色自适应底色

mix-blend-mode:difference 的缺点

<p>当然，这个方法不是完美的，因为通过 mix-blend-mode:difference]

<p>Mixing mode mix-blend-mode: Difference

CSS3에는 매우 흥미로운 속성인 mix-blend-mode가 추가되었습니다. 여기서 mix와 blend의 중국어 번역은 둘 다 mix입니다. 이 속성은 리터럴입니다. 물론 우리는 이를 블렌딩 모드라고 부릅니다. 아래와 같이 몇 가지 혼합 모드가 있습니다:

<p>

그 중 이번 글의 주인공은 mix-blend-mode: Difference인데, 이는 차이 모드를 의미합니다. 이 혼합 모드는 각 채널의 색상 정보를 보고 기본 색상을 그리기 색상과 비교한 다음 밝은 픽셀의 픽셀 값에서 어두운 픽셀의 픽셀 값을 뺍니다.

• 흰색과 혼합하면 배경색이 반전되고 검정색과 혼합하면 아무런 변화가 없습니다. 간단히 말하면, 상위 레이어의 밝은 부분은 하위 레이어의 색상을 반전시키고, 어두운 부분은 정상적으로 색상을 표시합니다.
효과는 원본 이미지와 완전히 반대되는 색상입니다
• . 이 혼합 모드의 가장 일반적인 적용 시나리오는 기사 시작 부분에 설명된 시나리오로, 텍스트가 다양한 배경색에 다양한 색상을 표시할 수 있도록 합니다.
• 흑백 장면에 가장 적합하며 매우 간단한 데모: rrreeerrreee효과는 다음과 같습니다:
• 
CodePen 데모 -- 선형 그라데이션 + 혼합 혼합 모드
• 물론 반드시 흑백일 필요는 없습니다. 아래 예를 보면 최종 성능이 확실하지 않을 때가 있습니다. 배경색 값(프론트 엔드에 전달된 배경 구성일 수 있음)이지만 텍스트는 배경색 아래에서 정상적으로 표시되어야 합니다. 이때 mix-blend-mode를 사용해 볼 수도 있습니다. 차이.
rrreeerrreee
• 배경색이 무엇이든 mix-blend-mode: Difference가 설정된 <p> 요소는 텍스트를 정상적으로 표시할 수 있습니다.
• CodePen 데모 -- mix-blend-mode:difference는 텍스트 색상 적응형 배경을 실현합니다

mix-blend-mode:difference 단점<p>

물론, 이 방법은 완벽하지 않습니다. 왜냐하면 mix-blend-mode:difference를 배경색으로 오버레이한 후에는 색상이 바뀔 수 있지만 정상적으로 표시된다고 해서 반드시 가장 적합한 색상이거나 디스플레이 효과에 가장 적합한 색상은 아닙니다. <p>

실제 사용에서는 흑백이 아닌 장면에서 선택을 하기 위해 더 많은 실험이 필요합니다. <p>

🎜마지막으로🎜🎜🎜이 글은 CSS 블렌딩 모드를 사용하여 텍스트 적응 배경 표시를 실현하는 약간의 요령을 소개합니다. 블렌딩 모드에 관심이 있다면 다음 글을 읽어 보시기 바랍니다: 🎜🎜🎜🎜 Incredible 블렌딩 모드 mix-blend-mode🎜🎜🎜🎜놀라운 블렌딩 모드 background-blend-mode🎜🎜🎜🎜두 줄의 CSS 코드로 이미지에 대한 모든 색상 색상 지정 기술 구현🎜🎜🎜🎜CSS를 능숙하게 사용하여 그라데이션 색상 QR 코드 만들기 🎜 🎜🎜🎜CSS 트릭 | 혼합 모드를 사용하여 텍스트 속이 빈 파동 효과 얻기🎜🎜🎜🎜CSS 혼합 모드 필터로 인한 CSS 3D 실패 문제 탐색🎜🎜🎜🎜CSS Art--배경을 사용하여 다양하고 멋진 배경 만들기🎜 🎜🎜🎜 자, 이것으로 글이 끝났습니다. 도움이 되셨으면 좋겠습니다🎜🎜🎜원본 주소: https://www.cnblogs.com/coco1s/p/16012545.html🎜🎜저자: ChokCoco🎜

<p> (학습 영상 공유: 웹 프론트엔드)

위 내용은 CSS 혼합 모드를 영리하게 사용하여 텍스트를 배경색에 맞게 지능적으로 조정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!