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

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

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

CSS?@supports允許程序員用多種不同的方法來(lái)探測(cè)當(dāng)前瀏覽器是否支持某項(xiàng)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混合模式

總結(jié)

以上是生活随笔為你收集整理的CSS3混合模式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。