CSS中background-blend-mode屬性怎么用

發(fā)布時間：2022-02-25 13:36:18 來源：億速云閱讀：182 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)CSS中background-blend-mode屬性怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　CSSbackground-blend-mode屬性

　　作用：用于定義了背景層的混合模式（圖片與顏色）

　　語法：

　　屬性值：

　　normal：默認(rèn)值，設(shè)置正常的混合模式。

　　multiply：正片疊底模式。

　　screen：濾色模式。

　　overlay：疊加模式。

　　darken：變暗模式。

　　lighten：變亮模式。

　　color-dodge：顏色減淡模式。

　　saturation：飽和度模式。

　　color：顏色模式。

　　luminosity：亮度模式。

　　注：InternetExplorer不支持background-blend-mode屬性。

　　CSSbackground-blend-mode屬性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<style>

　　body{background-color:yellow;}

　　div{

　　width:290px;

　　height:69px;

　　background-size:290px69px;

　　background-repeat:no-repeat;

　　background-image:linear-gradient(toright,#25a1b150%,#862e3e100%),url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');

　　background-blend-mode:color-dodge;

　　}

　　</style>

　　</head>

　　<body>

　　</body>

　　</html>

感謝各位的閱讀！關(guān)于“CSS中background-blend-mode屬性怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

猜你喜歡