最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

這篇文章主要介紹“怎么使用CSS混合模式讓文字智能適配背景顏色”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“怎么使用CSS混合模式讓文字智能適配背景顏色”文章能幫助大家解決問題。

我們提供的服務(wù)有：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、冊(cè)亨ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的冊(cè)亨網(wǎng)站制作公司

頁(yè)面上有一段文本，能否實(shí)現(xiàn)這段文本在不同背景色下展示不同的顏色？也就是俗稱的智能變色。像是下面這樣：

文本在黑色底色上表現(xiàn)為白色，在白色底色上表現(xiàn)為黑色?？此坪軓?fù)雜的一個(gè)效果，但是其實(shí)在 CSS 中非常好實(shí)現(xiàn)，今天就介紹這樣一個(gè)小技巧，在 CSS 中，利用混合模式 mix-blend-mode: difference，讓文字智能適配背景顏色。

混合模式 mix-blend-mode: difference

CSS3 新增了一個(gè)很有意思的屬性 -- mix-blend-mode ，其中 mix 和 blend 的中文意譯均為混合，那么這個(gè)屬性的作用直譯過來就是混合混合模式，當(dāng)然，我們我們通常稱之為混合模式。一共有下圖所示的一些混合模式：

其中，本文的主角是 mix-blend-mode: difference，意為差值模式。該混合模式會(huì)查看每個(gè)通道中的顏色信息，比較底色和繪圖色，用較亮的像素點(diǎn)的像素值減去較暗的像素點(diǎn)的像素值。

與白色混合將使底色反相；與黑色混合則不產(chǎn)生變化。

通俗一點(diǎn)就是上方圖層的亮區(qū)將下方圖層的顏色進(jìn)行反相，暗區(qū)則將顏色正常顯示出來，效果與原圖像是完全相反的顏色。

該混合模式最常見的應(yīng)用場(chǎng)景就是文章開頭描述的場(chǎng)景，實(shí)現(xiàn)文本在不同背景色下展示不同的顏色。

最適合于黑白場(chǎng)景，非常簡(jiǎn)單的一個(gè) DEMO：

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%);
    }
}

效果如下：

CodePen Demo -- linear-gradient + Mix-blend-mode

當(dāng)然，不一定是黑色或者白色，看看下面這個(gè)例子，有這樣一種場(chǎng)景，有的時(shí)候我們不太確定背景顏色的最終表現(xiàn)值（可能是后臺(tái)配置，傳給前端），但是又需要讓文字能夠在任何背景顏色下都正常展出，此時(shí)，也可以嘗試使用 mix-blend-mode: difference。

  
    
開通會(huì)員查看我的VIP等級(jí)