• mix-blend-model屬性用來定義元素與背景的混合模式，可以是元素與背景圖片的混合，也可以是元素與背景色的混合

• background-blend-mode屬性用來定義背景的混合模式，可以是背景圖片與背景圖片的混合，也可以是背景圖片和背景色的混合

isolation: isolate這個css3屬性，這個屬性正如其語義，就是隔離的意思，那隔離什么呢？是用來隔離mix-blend-mode元素的混合的。當元素應用了混合模式的時候，默認情況下，其會混合所有層疊順序比其低的層疊元素。像文字混合的例子中，我們不用隔離屬性的話，文字顏色還會混合白色背景，“words”顯示的就不是綠色了，但是，我們就希望混合模式只用到某一個元素，不向下滲透了的話，isolation: isolate就派上用場了，它會阻斷混合模式的進行，允許使一組元素從它們后面的背景中獨立出來，只混合這組元素。

CSS?@supports允許程序員用多種不同的方法來探測當前瀏覽器是否支持某項CSS樣式特征。

// JS if("CSS" in window && "supports" in window.CSS){ var support =window.CSS.supports("mix-blend-mode","difference");support =support?"mix-blend-mode":"no-mix-blend-mode";document.documentElement.className +=support; } // CSS h1 {color:#000; } .mix-blend-mode body {background-image:linear-gradient(90deg,#fff 49.9%,#000 50%); } .mix-blend-mode h1 { color:#fff; mix-blend-mode:difference; } // 另一種是直接用CSS中的@supports @supports(mix-blend-mode:difference) {body {background-image:linear-gradient(90deg,#fff 49.9%,#000 50%);}h1 {color:#fff;mix-blend-mode:difference; } }

原文地址：CSS3混合模式

總結

以上是生活随笔為你收集整理的CSS3混合模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。