歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
根據維基百科:
數字圖像編輯和計算機圖形中的混合模式(或混合模式)用于確定兩個圖層如何相互混合。在大多數應用程序中,默認的混合模式只是通過用頂層的內容覆蓋底層來隱藏底層。
在CSS中,有兩個屬性負責混合。mix-blend-mode用于混合DOM元素,background-blend-mode用于組合多個CSS背景。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
我們以一個基本的例子來看一下它是如何工作的。我的標題上方有一個圓圈。我要做的是將文本與圓混合。
「HTML」
「CSS」
為文本元素添加了mix-blend-mode: overlay,從而將其與圓混合。
事例源碼:https://codepen.io/shadeed/pen/a9c6751c0b99d3dbb04fd9514433e09e?editors=0100
我認為這是一個廣泛使用的混合模式。文字在上面,圖片在下面。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
在標題中添加了以下內容:
不僅僅是改變混合模式。例如,我們可以通過創建動畫來提高創意。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
在此示例中,我想探討文本如何與樹葉背景融合。由于圖像中包含暗點和亮點,因此在使文本看起來像在每片葉子下移動一樣,這將起到非常有用的作用。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
事例源碼:https://codepen.io/shadeed/pen/ef8d675755fde8087d9439b5593e1956?editors=0100
個有趣的效果是在帶有矢量和形狀的背景上有一個標題。當形狀的顏色不同時,它會變得更加有趣。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
我們能用這些斑點形狀做什么?我使用MorphSVG插件改變每個博客形狀的路徑。這產生了一個有趣的結果。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
事例源碼:https://codepen.io/shadeed/pen/daa6d51bfec15e3cbaef12e8387c97f3?editors=0010
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
吸引我眼球的效果是當元素有白色背景和黑色前景使用`mix-blend-mode: screen``。
我使用了SVG,并對其應用了以下內容。注意使用屏幕時黑色區域如何變為透明。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
事例源碼:https://codepen.io/shadeed/pen/4d309070bd3855c1b87a955ac2cec95e?editors=0100
對我來說,這是一個非常有用的用例。我經常需要添加播放圖標以指示文章中有視頻,因此我最終使用了從中心透明的SVG。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
這聽起來似乎正確,但有一定局限性。如果要添加懸停效果以填充三角形怎么辦?由于在SVG中減去了形狀,因此這是不可能的。一種解決方法是在SVG后面放置一個圓圈,并在懸停時對其進行著色。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
對我來說,這還不夠。我也想反過來,三角形必須是白色的,其余的是藍色的。
多虧了混合模式,我可以通過在懸停時控制嵌入式SVG快速實現改效果。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
事例源碼:https://codepen.io/shadeed/pen/e06735fd2d2fd707a37f2c4804379342?editors=0100
另一種情況是使用裁切圖像并將其與其下方的背景融合,結果非常有趣。
這個想法是把圖片放在右邊,左邊有標題和描述。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
同樣,通過為每張卡添加多個背景可以更好:
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
事例源碼:https://codepen.io/shadeed/pen/a30f4ac9af6c6ec87a30f63deb2fc2c5?editors=1000
我在Photoshop的早期就知道這個技巧。有時,我需要一個品牌的標志,它是很難得到一個透明的PNG版本。使用混合模式,這很容易解決。
我模擬了Facebook和Amazon徽標,并在每個徽標下添加了白色背景。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
現在來解決這個問題,添加了以下CSS:
注意,我添加了filter: contrast(2)來增加徽標的對比度。應用混合效果使他們比原來的顏色深一點。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
問題已解決!當然,我不建議使用此功能。但是,如果我被迫這么做,我將使用它來節省時間,當原始徽標到達時,我可以替換它并消除混合效果。
事例源碼:https://codepen.io/shadeed/pen/c8d0b773adf24901319794bda90d6a4e?editors=0100
isolation CSS屬性定義該元素是否必須創建一個新的層疊上下文(stacking context)。
該屬性的主要作用是當和background-blend-mode屬性一起使用時,可以只混合一個指定元素棧的背景:它允許使一組元素從它們后面的背景中獨立出來,只混合這組元素的背景。
「html」
「css」
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
如你所見,文本“ CSS很棒”僅在其父代的邊界內融合。外面的東西不會混在一起。換句話說,它是孤立的。
事例源碼:https://codepen.io/shadeed/pen/3b84bf8730ae27563f983e036f96aacb?editors=1100
isolation 可以通過使用創建新的堆棧上下文的屬性來實現。例如,如果父元素具有opacity 屬性,這將影響結果。
「html」
「css」
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
事例源碼:https://codepen.io/shadeed/pen/b6fcced3fba405846b2e93779282f3cb?editors=0100
它的工作方式類似mix-blend-mode,但具有多個背景圖像。每個背景可以有自己的混合模式,舉個例子。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
在此示例中,將三層混合在一起:基礎圖像,實心填充(Solid Fill)和漸變填充(radient Fill.)。
在CSS中,應該以正確的方式對每個背景進行排序。堆疊順序從上到下,如上圖所示。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
事例源碼:https://codepen.io/shadeed/pen/b4351fd10c5ff1e0a5b210f87c1040cd?editors=1100
通過使用徑向梯度,有一些有趣的結果比有用。這個想法是添加一個彩色的圖像,使它與它混合。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
通過對元素應用background-blend-mode: color,結果是圖像的去飽和版本。
CSS中的混合模式,制作高級特效的必備技巧
CSS中的混合模式,制作高級特效的必備技巧
事例源碼:https://codepen.io/shadeed/pen/3779d5b0ab6e013487638492573739f8

如需轉載,請注明文章出處和來源網址:http://www.hjkjtws.com.cn/css-texiao/texiao58175.shtml

时时彩内部管理计划群 浙江十一选五加奖 北京赛车pk10直播开奖 吉林心悦麻将官网下载安装 幸运28预测尽享云测 黑龙江新11选5开 四川巴蜀麻将 海南麻将下载地址 江苏十一选五基本走 股票行情实时查询600864 浙江十一选五五00期走势图 广东11选5现场直播开奖 炒股网上开户 好的网上免费棋牌 网游湖南亲友棋牌 贵州11选5开奖 彩吧论坛首页