您好,登錄后才能下訂單哦!
css中的background-blend-mode屬性是用來(lái)干什么的?怎么用?今天小編就總結(jié)了一篇文章來(lái)詳細(xì)闡釋這兩個(gè)問(wèn)題,希望你能有所收獲,一起來(lái)看看吧。
background-blend-mode屬性用于定義背景層的混合模式(圖片與顏色),可設(shè)置的模式有:正片疊底模式、濾色模式、疊加模式、變暗模式、變亮模式、顏色減淡模式、飽和度模式、顏色模式、亮度模式。
CSS background-blend-mode屬性
作用:用于定義了背景層的混合模式(圖片與顏色)
語(yǔ)法:
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
屬性值:
normal:默認(rèn)值,設(shè)置正常的混合模式。
multiply :正片疊底模式。
screen:濾色模式。
overlay:疊加模式。
darken:變暗模式。
lighten:變亮模式。
color-dodge:顏色減淡模式。
saturation:飽和度模式。
color:顏色模式。
luminosity:亮度模式。
注: Internet Explorer 不支持 background-blend-mode 屬性。
CSS background-blend-mode屬性的使用示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body {background-color: yellow;} div { width: 290px; height: 69px; background-size: 290px 69px; background-repeat:no-repeat; background-image: linear-gradient(to right, #25a1b1 50%,#862e3e 100%), url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png'); background-blend-mode: color-dodge; } </style> </head> <body> <div></div> </body> </html>
以上就是css中的background-blend-mode屬性的詳細(xì)內(nèi)容,代碼示例簡(jiǎn)單明了,如果在日常工作遇到此問(wèn)題。通過(guò)這篇文章,希望你能有所收獲,更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。