欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

background-blend-mode属性怎么用

发布时间:2019-05-13  编辑:杨雨个人博客网站   点击:   

background-blend-mode属性用于定义了背景层的混合模式(图片与颜色)。

background-blend-mode属性怎么用

CSS background-blend-mode属性

作用:用于定义了背景层的混合模式(图片与颜色)

语法:

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

参数:

normal:默认值,设置正常的混合模式。

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>

效果图:

2.jpg

本文地址:http://itbyc.com/web/css3/19460.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1