css background-blend-mode属性笔记

原创 PHP笔记  2017-09-23 18:25  阅读 822 views 次

css中,background-blend-mode属性是用来设置背景层的混合模式(图片与颜色)。

background-blend-mode属性值

  • normal:正常的混合模式(默认值)
  • multiply:正片叠底模式。
  • screen:滤色模式。
  • overlay:叠加模式。
  • darken:变暗模式。
  • lighten:变亮模式。
  • color-dodge:颜色减淡模式。
  • saturation :饱和度模式。
  • color:颜色模式。
  • luminosity:亮度模式。

语法格式:

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

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css background-blend-mode属性笔记</title>
<style>
body  {background-color: yellow;}
#bgb {
width: 290px;
height: 69px;
background-size: 290px 69px;
background-repeat:no-repeat;
background-image: linear-gradient(to right, green 0%,white 100%), url('https://www.ggbiji.com/wp-content/themes/Nana3.18/images/logo.png');
  background-blend-mode: color-dodge;
}
</style>
<head/>
<body>
<div id="bgb">
</div>
background-blend-mode属性演示!!
</body>
</html>

运行结果:

注意:Internet Explorer浏览器不支持background-blend-mode属性。

背景简写属性——>css background属性笔记

本文地址:https://www.ggbiji.com/css-background-blend-mode.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情